Angularjs выбрать несколько опций из объекта
Попытка выбора нескольких параметров в угловых значениях относительно значений объектов
Вот код:
myapp.controller('myctrl', [
'$scope',
function ($scope) {
$scope.query = {
Statuses: {
Draft: true,
Live: true,
Pending: true,
Archived: false,
Deleted: false
}
};
}
]);
И 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) рабочий образец на jsfiddle
http://jsfiddle.net/andrejkaurin/h9fgK/
Ответы
Ответ 1
Вы пытаетесь использовать множественный выбор, как список флажков, что немного странно. Multi-selects выводит массив. Вы не можете поместить ng-модель в тег опции, как это, она идет на самом выборе. Поэтому, поскольку select выведет массив значений, вам нужно будет пропустить значения и обновить узлы в вашей области.
Здесь плунжер, демонстрирующий код
И вот код:
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}}
Я надеюсь, что это поможет.
Ответ 2
Использование модели для статусов ($ scope.statuses) и ng-options для их перебора:
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>
Ответ 3
Только для того, чтобы указать, несколько элементов выбора IMO - это взаимодействие взаимодействия с пользовательским интерфейсом. Прикоснитесь ко всему, не забывая удерживать клавиши-модификаторы, о которых некоторые пользователи не знают, и вы теряете весь выбор. Особенно плохо, если есть достаточно вариантов, что они не все видны, то вы даже не можете сказать, когда вы отбрасываете существующий выбор. Несколько флажков - намного лучший способ представить одинаковые возможные варианты и текущий выбор. Их емкость может быть сделана прокручиваемой, фактически аналогичной мульти-select с большим количеством опций, чем размер. (Не ответ, который я знаю...)
Ответ 4
Вот альтернатива решению blesh
app.controller('MainCtrl', function($scope) {
$scope.query = {
Statuses: ["Pending","Live"]
};
});
И выберите
<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}}
Рабочий образец находится здесь:
http://plnkr.co/edit/bCLnOo