Angularjs select multiple options from object - angularjs

Question

Trying to select multiple options in angularjs regarding to object values
Here is a code:
myapp.controller('myctrl', [
'$scope',
function ($scope) {
$scope.query = {
Statuses: {
Draft: true,
Live: true,
Pending: true,
Archived: false,
Deleted: false
}
};
}
]);​
And html
<div ng-controller="myctrl">
<select multiple>
<option value="Draft" ng:model="query.Statuses['Draft']">Draft</option>
<option value="Pending" ng:model="query.Statuses.Pending">Pending</option>
<option value="Live" ng:model="query.Statuses.Live">Live</option>
<option value="Archived" ng:model="query.Statuses.Archived">Archived</option>
<option value="Deleted" ng:model="query.Statuses.Deleted">Deleted</option>
</select>
{{query | json}}
</div>
(Non)working sample on jsfiddle​
http://jsfiddle.net/andrejkaurin/h9fgK/

Answer 1

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 2

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 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...)