AngularJS复选框用于数字数组

AngularJS checkboxes for array of numbers

本文关键字：数组 数字 用于 复选框 AngularJS      更新时间：2023-09-26

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

例如，我的选择是：

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

相关文章：