数字数组的AngularJS复选框[重复]

Question

我有一个数字数组，我想将它们显示为用户可以选中/取消选中的复选框选择，然后我想做的是创建另一个值数组表示选中的复选框。

因此，例如，我的选择是：

$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 构建表单，并且为复选框设置选中标志应该很简单，但我不确定如何更新第二个数组。

有没有比较简单的方法？

非常感谢任何帮助！谢谢，

迪伦

Answer 1

为了与 Angular 中的复选框交互，我建议使用以下指令：http://vitalets.github.io/checklist-model/

如果你不想使用这个指令，你可以在你指定的 checkboxes 数组上创建观察者。

例如：

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 和工作示例。