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',
        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>