将复选框绑定到 Angular 模型数组答案

【问题标题】：Bind Checkboxes to Angular Model array将复选框绑定到 Angular 模型数组
【发布时间】：2014-05-15 03:06:28
【问题描述】：

我想在angular中直接将一个复选框列表绑定到一个数组，这样当复选框被选中时，它的值被推到数组上，当没有选中时，它被弹出，这样数组就在模型总是代表我想要的最终状态。以前，我通过将复选框映射到数组索引来完成此操作，然后删除 null 值 - 但我想尝试另一种方式。

我想停止直接绑定到模型，而是在复选框更新时运行一个函数，该函数处理将数据放入数组。

这种方法有什么问题吗？
从控制器更新模型时，我必须注意哪些注意事项？

HTML（角度）

<div ng-app="app" ng-controller="Ctrl">
    <span ng-repeat='option in options'>
        <label>{{option.value}}</label>
        <input type="checkbox"         
        ng-value="option.code"
     ng-checked="selected.indexOf(option.code) > -1"
        ng-click="toggleSelect(option.code)" />
        <br />
    </span><br />
    {{selected}}
</div>

JavaScript（角度）

var App = angular.module('app', []);

App.controller('Ctrl', ['$scope', function($scope){
    $scope.options = [
        {value: "Jan", code: 1}, 
        {value: "Feb", code: 2}, 
        {value: "Mar", code:  3}, 
        {value: "Apr", code:  4}, 
        {value: "May", code:  5}, 
        {value: "Jun", code:  6}, 
        {value: "Jul", code:  7}, 
        {value: "Aug", code:  8}, 
        {value: "Sep", code:  9}, 
        {value: "Oct", code:  10}, 
        {value: "Nov", code:  11}, 
        {value: "Dec", code:  12}
    ];

    $scope.selected = [1, 2, 9]

    $scope.toggleSelect = function toggleSelect(code) {
        var index = $scope.selected.indexOf(code)

        if (index == -1) {
            $scope.selected.push(code)
        }
        else {
            $scope.selected.splice(index, 1)
        }
    }
}]);

演示：http://jsfiddle.net/rianodwyer/8dPRn/

【问题讨论】：

标签： javascript arrays angularjs checkbox

【解决方案1】：

我想停止直接绑定到模型，而是在复选框更新时运行一个函数，该函数处理将数据放入数组。

这是 Angular 的强大功能，可让您轻松管理对象（代表您的复选框列表）。更少的代码并且很容易维护。然而，在某些情况下，我们希望跟踪更改并做其他事情（我的意思是除了检查/取消检查操作之外）。

例如：

 $scope.toggleSelect = function toggleSelect(code)
 {
  /**/
 AsyncService.doStuff();
 }

这种方法有什么问题吗？

没有错，但是这种方法（在您的情况下）类似于 javascript native。所以我们失去了角度优势。我会使用模型绑定并在$scope.options（甚至$watchCollection）上实现$watch。比如：

$scope.$watch(function () {
    return $scope.options; // listen on model watch
},
function (newValue, oldValue) {
    /* any checkbox clicked */
}, true);

从控制器更新模型时我必须注意哪些警告？

别这么认为，很简单的流程。

【讨论】：