I tried AngularJS ui-select demo app: https://github.com/angular-ui/ui-select2/tree/master/demo for multi select. Specific example I tried is multi select with pre-defined value. Initially it loads with the two preselected states. On clicking an entry, drop down shows undefined. and model has the two character state name. Am I missing something?
plunker link : http://plnkr.co/edit/IeWSZX2MDq1GfXbm3hQB
html:
<input type="text" style="width:300px" ui-select2="multi" ng-model="multi2Value" />
Snippet:
var states = [
{ text: 'Alaskan/Hawaiian Time Zone', children: [
{ id: 'AK', text: 'Alaska' },
{ id: 'HI', text: 'Hawaii' }
]},
{ text: 'Pacific Time Zone', children: [
{ id: 'CA', text: 'California' },
{ id: 'NV', text: 'Nevada' },
{ id: 'OR', text: 'Oregon' },
{ id: 'WA', text: 'Washington' }
]}, ...}
$scope.multi2Value = [
{ id: 'CT', text: 'Connecticut' },
{ id: 'DE', text: 'Delaware' }];
$scope.multi = {
multiple: true,
query: function (query) {
query.callback({ results: states });
},
initSelection: function (element, callback) {
var val = $(element).select2('val'),
results = [];
for (var i=0; i<val.length; i++) {
results.push(findState(val[i]));
}
callback(results);
}
};
Change your <input>
field to <div>
and try it again.
The html markup should looks like this:
<div style="width:300px" ui-select2="multi" ng-model="multi2Value" />