Search code examples
javascriptangularjsangular-directive

Checklist directive stops working after changing array

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.

enter image description here Can anyone see what ive done wrong?

Solution

  • 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>