javascript - AngularJS 数字数组的复选框

Question

这个问题已经有答案了:

How do I bind to list of checkbox values with AngularJS? (29 个回答)

已关闭 8 年前。

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

例如，我的选择是:

$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 中的 cckeckbox 交互，我建议使用以下指令: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为您提供工作示例。