Angularjs select multiple options from object

Question

Trying to select multiple options in angularjs regarding to object values

Here is a code:

myapp.controller(\'myctrl\', [
        \'$scope\',
                 


        

Answer 1

You're trying to use a select multiple like a checkbox list, which is a little strange. Multi-selects output an array. You can't put ng-model on an option tag like that, it goes on the select itself. So since the select will output an array of values, you'll need to loop through the values and update the nodes in your scope.

Here's a plunk demonstrating the code

And here's the code:

JS

function inArray(x, arr) {
  for(var i = 0; i < arr.length; i++) {
    if(x === arr[i]) return true;
  }
  return false;
}

app.controller('MainCtrl', function($scope) {
   $scope.query = {
                Statuses: {
                    Draft: true,
                    Live: true,
                    Pending: true,
                    Archived: false,
                    Deleted: false
                }
            };
  $scope.selectionsChanged = function(){
    for(var key in $scope.query.Statuses) {
      $scope.query.Statuses[key] = inArray(key, $scope.selectedValues);
    }
  };
});

HTML

<select multiple ng-model="selectedValues" ng-change="selectionsChanged()">
    <option value="Draft" ng-selected="query.Statuses.Draft">Draft</option>
    <option value="Pending" ng-selected="query.Statuses.Pending">Pending</option>
    <option value="Live" ng-selected="query.Statuses.Live">Live</option>
    <option value="Archived" ng-selected="query.Statuses.Archived">Archived</option>
    <option value="Deleted" ng-selected="query.Statuses.Deleted">Deleted</option>
</select>
<br/>
    {{query | json}}

I hope that helps.

Answer 2

Using a model for statuses ($scope.statuses), and ng-options to iterate over them:

function MyCtrl($scope) {
    $scope.statuses = [ 'Draft', 'Pending', 'Live', 'Archived', 'Deleted' ];
    $scope.selectedStatuses = [ 'Pending', 'Live' ];
}​

.

<select ng-model="selectedStatuses" multiple ng-options="status for status in statuses">
</select>

Answer 3

Here is an alternate to blesh solution

app.controller('MainCtrl', function($scope) {

  $scope.query = {
      Statuses: ["Pending","Live"]
  };
});

And select

<select multiple ng:model="query.Statuses" >
      <option value="Draft">Draft</option>
      <option value="Pending">Pending</option>
      <option value="Live">Live</option>
      <option value="Archived">Archived</option>
      <option value="Deleted">Deleted</option>
  </select>
  {{query | json}}

Working sample is here:

http://plnkr.co/edit/bCLnOo

Answer 4

Just to point out, IMO multiple select elements are a UI interaction evil. Touch anything without remembering to hold down modifier keys, which some users don't know about, and you lose the whole selection. Especially bad if there enough options that they're not all visible, then you can't even tell when you're dropping an existing selection. Multiple checkboxes are a much better way to represent the same possible options and current selection. A container's worth of them can be made scrollable, effectively similar to a multi-select with more options than size. (Not an answer I know...)