将复选框绑定到Angular Model数组

Question

我想将一个复选框列表直接按角度绑定到一个数组，以便在选中该复选框时，将其值推送到该数组上，而当未选中时，将其弹出，以便该模型上的数组始终表示我想要的最终状态。 以前，我是通过将复选框映射到数组索引来完成此操作的，然后再删除null值-但我想尝试另一种方法。

我想停止直接绑定到模型，但是仅在复选框更新时运行一个函数，该函数可以处理将数据放在数组上的情况。

1. 这种方法有什么问题吗？
2. 从控制器更新模型时，我必须注意一些警告吗？

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/

Answer 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);

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

不要这么认为，流程非常简单。