Question

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

我希望直接绑定到模型，但只需在更新复选框时运行一个函数，该函数处理将数据放入数组。

这种方法有什么问题吗？
从控制器更新模型时，我是否需要注意一些注意事项？

HTML（Angular）

<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（Angular）

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原生。所以我们失去了角度优势。我会使用模型绑定并在$watch（甚至$scope.options）上实现$watchCollection。类似的东西：

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

从控制器更新模型时，我是否需要注意一些注意事项？

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

将复选框绑定到Angular Model数组

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

1 个答案: