checkbox - 带有子元素的 Angular 双向绑定(bind)

Question

我的问题是创建 Angular 指令。

我想用一个 ng-model 创建一组复选框。它就像一个位域或标志，即复选框的值从 0、1、2、3 到 n，但对于 ng-model，我只想为所有选中的复选框添加 2^value。然后要添加的值是 1、2、4、8、16 ...

我想知道是否有更好、更正确或更简单的解决方案来解决我的问题。

http://plnkr.co/edit/9h7EkEpDohXTniIDHdc5

在示例中，您可以更改文本框中的值，检查将被更新，但反之则不行。这有点疯狂，代码可以在我的开发机器上运行，但不能在 Plnkr 上运行!

app.directive('ngCheckboxFlags', function () {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ctrls) {
        var flagSum;
        var checkboxes = [];

        // trigger changes of the ngModel
        scope.$watch(attrs.ngModel, function (value) {
            flagSum = value;
            for (var i = 0, ii = checkboxes.length; i < ii; ++i) {
                var checkbox = checkboxes[i];
                checkbox.checked = flagSum & (1<<checkbox.value);
            }
        });

        for (var i = 0, inputs = element.find('input[type=checkbox]'), ii = inputs.length; i < ii; ++i) 
        {
            var checkbox = inputs[i];
            checkboxes.push(checkbox);
            // trigger changes of HTML elements
            $(checkbox).bind('change', function () {
                flagSum = ctrls.$viewValue ^ (1<<this.value);
                console.log(flagSum);

                //ERROR: Change not happening, textbox shows old value
                scope.$apply(function () {
                    ctrls.$setViewValue(flagSum);
                });
            });
        }
    }
};
});

提前谢谢克努特

Answer 1

不要将 ng-model 直接绑定(bind)到基本类型，而是使用对象:

$scope.sum = {
  ofCheckValues: 3
};

在 HTML 上:

ng-model="sum.ofCheckValues"

“只要你有 ng-model，就一定会有一个点在某处。如果你没有点，那你就做错了。”

plunker:http://plnkr.co/edit/NRAk3kyP1rdDmYrsz6ZL?p=preview