Question

我需要一个帮助来查看计数复选框的复选框，我试着使用指令使表格复选框失效，但我无法观察新的更改。我不知道我是否正确这样做。

<div class="checkbox" ng-repeat="color in pdct.colors">
    <label>
        <input type="checkbox"
               name="favoriteColors"
               ng-model="color.checked"
               {{--ng-checked="pdct.checkedColors.indexOf(color) != -1"--}}
               ng-click="pdct.toggleOptionChecked(pdct.checkedColors, color)"
               ng-required="!pdct.checkedColors.length"
               ng-count-items
               count="pdct.checkedColors.length"
               maxlength="2"/>
        <% color.title %>
    </label>
</div>

<ng-messages for="formProduct.favoriteColors.$error">
     <div class="alert-warning" ng-message="required">
           Please select one color.
     </div>
     <div class="alert-warning" ng-message="maxlength">
           Is need only %s options.
     </div>
</ng-messages>

在我的控制器中，pdct.toggleOptionChecked负责计算复选框并在checkedColors变量中连接。

checkedColors是编辑页面中使用的值，数据库中检索数据。

我的指示是：</ p>

angular.module('myApp')
        .directive('ngCountItems', checkItems);

    function checkItems() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: _link
        };

        function _link (scope, element, attrs, ngModel) {

            if (!ngModel) return; // do nothing if no ng-model.

            var properties = [];
            var property = attrs.ngModel;

            scope.$watchCollection('count', function (oldValue, newValue) {
                console.log('====== $watch: ', oldValue, newValue);
            });
        }
    }

[更新] 我解决了这个疑问！

突出显示my-checkbox指令和allowed布尔属性。见下文：

<div class="checkbox" ng-repeat="color in pdct.productColors">
  <label>
      <input type="checkbox"
             name="favoriteColors"
             ng-model="color.checked"
             ng-checked="pdct.checkedColors.indexOf(color) != -1"
             ng-click="pdct.toggleOptionChecked(pdct.checkedColors, color, ...)"
             ng-required="!pdct.checkedColors.length"
             my-checkboxes
             allowed="pdct.checkedColors.length <= 2"/>
      <% color.title %>
  </label>
</div>

<div ng-message="maxExceeded"> .... </div>

在我的指示中，请注意attrs.allowed属性：

scope.$watchCollection(attrs.allowed, function (newValue, oldValue, _scope) {
    ngModel.$setValidity('maxExceeded', newValue);
});

观看angularjs指令

0 个答案: