将复选框绑定到Angular Model数组

I want to bind a list of checkboxes to an array directly in angular, so that when the checkbox is selected, it's value is pushed onto the array, and when not checked, it is popped off, so that the array on the model always represents the final state I want. Previously, I had done it by mapping checkboxes to array index, and then later stripping out null values - but I would like to try it another way.

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

I want stop binding directly to the model, but just run a function when the checkboxes are updated, which handles putting data on the array.

我希望直接绑定到模型,但只是在更新复选框时运行一个函数,它处理数据在数组上的放置。

Is there anything wrong with this approach?

这种方法有什么问题吗?

Are there any caveats I must beware of when updating the model from the controller?

从控制器更新模型时,是否有任何警告我必须注意?

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)
        }
    }
}]);

Demo: http://jsfiddle.net/rianodwyer/8dPRn/

1 个解决方案

#1

I want stop binding directly to the model, but just run a function when the checkboxes are updated, which handles putting data on the array.

我希望直接绑定到模型,但只是在更新复选框时运行一个函数,它处理数据在数组上的放置。

This is a power of Angular that allows you to manage object (that represents your check-box list) easily. Less code and sure easy to maintain. In some cases however, we want to keep track of change and do other stuff (I mean in addition to check/uncheck action).

这是Angular的强大功能,允许您轻松管理对象(代表您的复选框列表)。代码少,易于维护。但是,在某些情况下,我们希望跟踪变化并做其他事情(我的意思是除了检查/取消选中操作)。

For example:

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

Is there anything wrong with this approach?

这种方法有什么问题吗?

Nothing wrong but this aproach (in your case) is similar to javascript native. So we lose angular advantage. I would use model binding and implement $watch on $scope.options (or even $watchCollection). Something like:

没错,但是这个方法(在你的情况下)类似于javascript原生。所以我们失去了角度优势。我会使用模型绑定并在$ scope.options(甚至$ watchCollection)上实现$ watch。就像是:

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

Are there any caveats I must beware of when updating the model from the controller?

从控制器更新模型时,是否有任何警告我必须注意?

Don't think so, pretty straightforward flow.

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

#1