AngularJS ui-select2 multi select not working

Question

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);
    }
};

can you provide a plunker?

Poyraz Yilmaz
– Poyraz Yilmaz

2014-03-12 21:50:25 +00:00
Commented Mar 12, 2014 at 21:50 — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Mar 12, 2014 at 21:50

Allen · Accepted Answer · 2014-04-08 01:06:00Z

15

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" />

edited Apr 8, 2014 at 1:06

answered Apr 7, 2014 at 14:33

Allen

3163 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ankurJos Over a year ago

Hi Allen, thanks for the solution , this really helped. Could you please also tell the reason for this ?

khichar.anil · Accepted Answer · 2014-08-03 04:01:41Z

3

You can even use the select tag as well. I have created a plunker for this:

HTML:

<select multiple class="full-width" ui-select2="groupSetup" ng-model="activity.act_group_id" ng-init="activity.act_group_id=split_custom(activity.act_group_id,',',1)" data-placeholder="Select Group">
  <option ng-repeat="group in groups | orderBy:'text'" value="{{group.id}}">{{group.text}}</option>
</select>

JS:

$scope.groups = [{"text": "Group1", "id": 2}, {"text": "Group2", "id": 62}, {"text": "Group3", "id": 68}, {"text": "Group4", "id": 74}, {"text": "Group5", "id": 98}, {"text": "Group6", "id": 104}, {"text": "Group7", "id": 107}, {"text": "Group8", "id": 139}, {"text": "Group9", "id": 149}, {"text": "Group10", "id": 154}];
$scope.groupSetup = {
    multiple: true,
    formatSearching: 'Searching the group...',
    formatNoMatches: 'No group found'
};

http://plnkr.co/edit/dpX7jNkEgRoPyRZpJV92?p=preview

answered Aug 3, 2014 at 4:01

khichar.anil

5,1141 gold badge27 silver badges21 bronze badges

3 Comments

j7m Over a year ago

How can you set some options as selected by default?

khichar.anil Over a year ago

@PeterPan: Go to the plunker and see some groups are selected by default. It's done by calling split_custom js function on ng-init which selects the options which you want to selected. Please have a dig into code and let me know If I can help you more to debug it.

Osman Over a year ago

Hi, can u help me, how can i refresh model like activity.act_group_id

Collectives™ on Stack Overflow

AngularJS ui-select2 multi select not working

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related