AngularJS选择多个选项
AngularJS选择多个选项
提问于 2013-09-12 04:56:20
所以，我尝试用普通的JS做的相当简单，但我使用的是AngularJS，我想知道如何在框架中以最好的方式完成它。我想要更新多选框中的选定选项。我不想添加或删除任何选项。下面是我的HTML的样子：
<select multiple>
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Yellow</option>
<option value="4">Red</option>
</select>使用以下数组，我想以编程方式从该列表中选择/取消选择选项：
[{id:1, name:"Blue"},{id:4, name:"Red"}]当我在作用域中设置此数组时，我希望选择框取消选择除Blue或Red以外的任何内容，并选择Blue和Red。我在Google组上看到的标准答案是使用ng-repeat。但是，我不能每次都重新创建列表，因为所选值的列表是不完整的。据我所知，AngularJS没有这样的机制，我不知道如何在不使用jQuery的情况下做到这一点。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-09-12 05:39:53
ngModel太棒了！如果将索引指定为模型selectedValues
<select multiple ng-model="selectedValues">从$watch中的列表(selected)构建
$scope.$watch('selected', function(nowSelected){
// reset to nothing, could use `splice` to preserve non-angular references
$scope.selectedValues = [];
if( ! nowSelected ){
// sometimes selected is null or undefined
return;
}
// here's the magic
angular.forEach(nowSelected, function(val){
$scope.selectedValues.push( val.id.toString() );
});
});ngModel将自动为您选择它们。
请注意，此数据绑定是单向的(selected到UI)。如果您想要使用<select> UI来构建列表，我建议您重构数据(或者使用另一个$watch，但这样做的代价可能会很高)。
是的，selectedValues需要包含字符串，而不是数字。(至少对我来说是这样的:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18751129
复制相关文章
相似问题