我有一个数字数组,我想将其显示为一组复选框,然后用户可以选中/取消选中这些复选框,我想做的是创建另一个代表选中复选框的值数组。
例如,我的选择是:
$scope.options = [500, 1250, 2500, 5000, 10000, 25000, 50000, 100000];
我的第二个数组是:
$scope.selected = [1250, 2500, 5000, 10000, 25000];
我想构建一个看起来像的表单
[]500
[x] 1250
[x] 2500
[x] 5000
[x] 10000
[x] 25000
[]50000
[]100000
根据表单中选中/未选中的值更新第二个数组。我想我知道如何通过在第一个数组上使用ngRepeat来构建表单,并且为复选框设置checked标志应该足够简单,但我不确定的是如何更新第二次数组。
有没有一种相对简单的方法可以做到这一点?
非常感谢您的帮助!谢谢,
Dylan
对于Angular中与ckeckboxes的交互,我建议使用以下指令:http://vitalets.github.io/checklist-model/
如果不想使用此指令,可以在指定的复选框数组上创建观察程序。
例如:
function MyCtrl($scope) {
$scope.items = [
{
checked: false,
value: 1
},
{
checked: false,
value: 2
},
{
checked: false,
value: 3
},
{
checked: false,
value: 4
}
];
$scope.selectedItems = [];
$scope.$watch('items', function(newValues){
$scope.selectedItems.length = 0;
angular.forEach(newValues, function(item) {
if (item.checked == true) {
$scope.selectedItems.push(item.value);
}
});
}, true);
}
您的观点:
<div ng-controller="MyCtrl">
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.checked"/>
{{item.value}}
</div>
<pre>{{selectedItems}}</pre>
</div>
这种方式将允许您始终拥有有关所选复选框的实际信息。
我已经为您创建了JSFiddle工作示例。