mercredi 24 mai 2017

How to watch checkboxes count in angularjs directive

I need a help to watch event of count checkboxes checked and I'm try to make it with directive to invalidate form checkbox later, but I can't watch new changes. I don't know if I do this correctly.

<div class="checkbox" ng-repeat="color in pdct.colors">
    <label>
        <input type="checkbox"
               name="favoriteColors"
               ng-model="color.checked"
               
               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>

In my controller, pdct.toggleOptionChecked is responsable for count the checkboxes and concatenate in checkedColors variable.

checkedColors is a value utilized in edit page, with data retrieved on database.

And my directive is:

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




Aucun commentaire:

Enregistrer un commentaire