尝试在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>
(非)工作样本在jsfiddle上
答案 0 :(得分:13)
使用状态模型($ 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>
答案 1 :(得分:12)
你正试图使用像复选框列表这样的选择倍数,这有点奇怪。多选输出数组。你不能把ng-model放在这样的选项标签上,它会在选择本身上进行。因此,由于select将输出一个值数组,因此您需要遍历这些值并更新范围中的节点。
Here's a plunk demonstrating 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}}
我希望有所帮助。
答案 2 :(得分:6)
以下是漂白剂溶液的替代品
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}}
工作样本在这里:
答案 3 :(得分:6)
只是要指出,IMO多个选择元素是一个UI交互邪恶。触摸任何东西,而不记得按住修改键,一些用户不知道,你丢失了整个选择。特别糟糕的是,如果有足够的选项,它们并非全部可见,那么你甚至无法分辨你何时放弃现有的选择。多个复选框是表示相同可能选项和当前选择的更好方法。容器的价值可以滚动,有效地类似于多选项,而不是大小。 (不是我知道的答案......)