Angular how to have multiple selected

Question

I have this array of objects. that holds somethings like this.

[
    {
        id: 1,
        name: "Extra Cheese"
    },
    {
        id: 2,
        name: "No Cheese"
    }
]

im iterating thru the array here

<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier._id as modifier.name for modifier in modifiers"></select>

The thing item.modifiers model that has an array of this 2 id

[
    1,2
]

I want the multi select to auto selected the two ids that are in the item.model

I want the final result to look something like this

Is there an external library that we should know about ? The multi-select screenshot, is that already done on the front end and you only want to know how to set the selected options initially ? — Searching
– Searching, Commented Nov 18, 2016 at 2:41

Icycool · Accepted Answer · 2016-11-18 04:32:49Z

Your code is pretty much working already, maybe some of the variables are not assigned correctly (eg. id instead of _id)

angular.module('test', []).controller('Test', Test);

function Test($scope) {
  $scope.modifiers = [
    {
        id: 1,
        name: "Extra Cheese"
    },
    {
        id: 2,
        name: "No Cheese"
    }
  ]
  
  $scope.item = {};
  
  // add this for pre-selecting both options
  $scope.item.modifiers = [1,2];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
  <select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier.id as modifier.name for modifier in modifiers"></select>
</div>

Andrew Lahikainen · Accepted Answer · 2016-11-18 03:26:38Z

If I understand the question correctly, you're wanting to pre-select the two options.

To do this you will need to set your ng-model to point to the actual objects you are iterating over.

You will also need to change your ng-options to ng-options="modifier as modifier.name for modifier in modifiers" rather than just iterating over the ids.

Here's the relevant documentation under Complex Models (objects or collections) https://docs.angularjs.org/api/ng/directive/ngOptions

Something like this should work:

HTML:

<select ng-model="$ctrl.item.modifiers"
  ng-options="modifier as modifier.name for modifier in $ctrl.modifiers"
  multiple chosen class="chosen-select" tabindex="4" >
</select>

JS:

app.controller("my-controller", function() {
    var $ctrl = this;

    $ctrl.modifiers = [{
      id: 1,
      name: "Extra Cheese"
    }, {
      id: 2,
      name: "No Cheese"
    }];

    $ctrl.item = {
      modifiers: []
    }

  $ctrl.$onInit = function() {
    const id1 = 1;
    const id2 = 2;
    for (const modifier of $ctrl.modifiers) {
      if (modifier.id === id1 || modifier.id === id2) {
        $ctrl.item.modifiers.push(modifier);
      }
    }
  }
}

Here's a pen showing the result: http://codepen.io/Lahikainen/pen/WooaEx

I hope this helps...

Obviously, I don't know how you're pre-populating your model so that part in that populates it can probably be improved :)

Collectives™ on Stack Overflow

Angular how to have multiple selected

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related