检查表指令在更改数组后停止工作

Question

So i have the following directive:

app.directive('checklistModel', ['$parse', '$compile', function($parse, $compile) {
    // contains
    function contains(arr, item, comparator) {
        if (angular.isArray(arr)) {
            for (var i = arr.length; i--;) {
                if (comparator(arr[i], item)) {
                    return true;
                }
            }
        }
        return false;
    }

    // add
    function add(arr, item, comparator) {
        arr = angular.isArray(arr) ? arr : [];
        if(!contains(arr, item, comparator)) {
            arr.push(item);
        }
        return arr;
    }

    // remove
    function remove(arr, item, comparator) {
        if (angular.isArray(arr)) {
            for (var i = arr.length; i--;) {
                if (comparator(arr[i], item)) {
                    arr.splice(i, 1);
                    break;
                }
            }
        }
        return arr;
    }

    // http://stackoverflow.com/a/19228302/1458162
    function postLinkFn(scope, elem, attrs) {
        // compile with `ng-model` pointing to `checked`
        $compile(elem)(scope);

        // getter / setter for original model
        var getter = $parse(attrs.checklistModel);
        var setter = getter.assign;
        var checklistChange = $parse(attrs.checklistChange);

        // value added to list
        var value = $parse(attrs.checklistValue)(scope.$parent);


        var comparator = angular.equals;

        if (attrs.hasOwnProperty('checklistComparator')){
            comparator = $parse(attrs.checklistComparator)(scope.$parent);
        }

        // watch UI checked change
        scope.$watch('checked', function(newValue, oldValue) {
            if (newValue === oldValue) {
                return;
            }
            var current = getter(scope.$parent);
            if (newValue === true) {
                setter(scope.$parent, add(current, value, comparator));
            } else {
                setter(scope.$parent, remove(current, value, comparator));
            }

            if (checklistChange) {
                checklistChange(scope);
            }
        });

        // declare one function to be used for both $watch functions
        function setChecked(newArr, oldArr) {
            scope.checked = contains(newArr, value, comparator);
        }

        // watch original model change
        // use the faster $watchCollection method if it's available
        if (angular.isFunction(scope.$parent.$watchCollection)) {
            scope.$parent.$watchCollection(attrs.checklistModel, setChecked);
        } else {
            scope.$parent.$watch(attrs.checklistModel, setChecked, true);
        }
    }

    return {
        restrict: 'A',
        priority: 1000,
        terminal: true,
        scope: true,
        compile: function(tElement, tAttrs) {
            if (tElement[0].tagName !== 'INPUT' || tAttrs.type !== 'checkbox') {
                throw 'checklist-model should be applied to `input[type="checkbox"]`.';
            }

            if (!tAttrs.checklistValue) {
                throw 'You should provide `checklist-value`.';
            }

            // exclude recursion
            tElement.removeAttr('checklist-model');

            // local scope var storing individual checkbox model
            tElement.attr('ng-model', 'checked');

            return postLinkFn;
        }
    };
}]);

Basicly what it does is it allows me to create the following:

 <label class="i-checks">
        <input type="checkbox" checklist-model="selectedUsers" class="userChecker"
               data-checklist-value="user">
        <i></i>
    </label>

Basicly whever a checkbox has been clicked the item is being added to a seperate list in this case the object user is added to the list selectedUsers

Now i am creating a select all function that looks something like this:

  scope.selectAll = function () {
    var filteredItems = $filter('filter')(scope.uninvitedList, scope.search);
    if (!scope.checkAll) {
        scope.selectedUsers = [];
    }
    else {
        scope.selectedUsers = filteredItems;
    }

};

What this allows me to is to select all visible elements

Once i press this it correctly adds all of the users to a list and checks off all the checkboxes. i click it again and it sets it to an empty array however there is a problem:

1. The list check box is still checked as shown on the picture below

2. i am no longer able to select individuals and add them to the list.

Can anyone see what ive done wrong?

Answer 1

Looks like a dot-rule problem at selectedUsers scope variable. Please have a look at this SO question to see what I mean.

In the demo I'm using selection.selectedUsers to make the two-way binding work.

Please have a look at a working demo below or this jsfiddle .

 angular.module('demoApp', []) .controller('mainController', function($scope, $timeout) { $scope.users = [{ id: 0, name: 'John' }, { id: 1, name: 'Jane' }]; $scope.selection = { selectedUsers: [$scope.users[0]] }; //[$scope.users[0]]; $scope.selectAll = function() { //console.log($scope.checkAll); $scope.selection.selectedUsers = $scope.checkAll ? angular.copy($scope.users) : []; } }) .directive('checklistModel', ['$parse', '$compile', function($parse, $compile) { // contains function contains(arr, item, comparator) { if (angular.isArray(arr)) { for (var i = arr.length; i--;) { if (comparator(arr[i], item)) { return true; } } } return false; } // add function add(arr, item, comparator) { arr = angular.isArray(arr) ? arr : []; if (!contains(arr, item, comparator)) { arr.push(item); } return arr; } // remove function remove(arr, item, comparator) { if (angular.isArray(arr)) { for (var i = arr.length; i--;) { if (comparator(arr[i], item)) { arr.splice(i, 1); break; } } } return arr; } // https://stackoverflow.com/a/19228302/1458162 function postLinkFn(scope, elem, attrs) { // compile with `ng-model` pointing to `checked` $compile(elem)(scope); // getter / setter for original model var getter = $parse(attrs.checklistModel); var setter = getter.assign; var checklistChange = $parse(attrs.checklistChange); // value added to list var value = $parse(attrs.checklistValue)(scope.$parent); var comparator = angular.equals; if (attrs.hasOwnProperty('checklistComparator')) { comparator = $parse(attrs.checklistComparator)(scope.$parent); } // watch UI checked change scope.$watch('checked', function(newValue, oldValue) { if (newValue === oldValue) { return; } var current = getter(scope.$parent); if (newValue === true) { setter(scope.$parent, add(current, value, comparator)); } else { setter(scope.$parent, remove(current, value, comparator)); } if (checklistChange) { checklistChange(scope); } }); // declare one function to be used for both $watch functions function setChecked(newArr, oldArr) { scope.checked = contains(newArr, value, comparator); } // watch original model change // use the faster $watchCollection method if it's available if (angular.isFunction(scope.$parent.$watchCollection)) { scope.$parent.$watchCollection(attrs.checklistModel, setChecked); } else { scope.$parent.$watch(attrs.checklistModel, setChecked, true); } } return { restrict: 'A', priority: 1000, terminal: true, scope: true, compile: function(tElement, tAttrs) { if (tElement[0].tagName !== 'INPUT' || tAttrs.type !== 'checkbox') { throw 'checklist-model should be applied to `input[type="checkbox"]`.'; } if (!tAttrs.checklistValue) { throw 'You should provide `checklist-value`.'; } // exclude recursion tElement.removeAttr('checklist-model'); // local scope var storing individual checkbox model tElement.attr('ng-model', 'checked'); return postLinkFn; } }; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="demoApp" ng-controller="mainController"> <h3> Directive </h3> <input type="checkbox" ng-model="checkAll" ng-change="selectAll()" />check all <div ng-repeat="user in users"> <label class="i-checks"> <input type="checkbox" checklist-model="selection.selectedUsers" class="userChecker" data-checklist-value="user">{{user.name}} </label> </div> <pre> Debugging models here: selectedUsers: {{selection.selectedUsers | json : 2}} user model: {{users | json: 2}} </pre> </div>