different 'select all' checkboxes for different lists of checkboxes, angularjs

Question

On my page I have a three list of checkboxes. Each list has an own checkbox "select all". I do not want to increase code with duplicating lines, that's why I'm using the same function with parameter to select certain list of checkboxes

      $scope.selectAll = function(array) {
            angular.forEach(array, function(item) {
                 item.Selected = $scope.model.selectedAll;
             });
       };

html

   <input type="checkbox"
            ng-model="model.selectedAll" 
            ng-change="selectAll(categories)" >

It gives me desirable result, I can select all checkboxes in certain array. But here is the problem. $scope.model.selectedAll related to all lists and when I select all at the one list, checkbox "select all" is checked in all lists.

I clearly understand this problem, I just don't have any idea how to resolve it. I have been thinking about creating of 3 different variables for each list but I'm using function with parameter, where array is unknown, so I cannot associate certain variable with it and it won't be working.

Is there any way to resolve this problem without duplicating code for particular list of checkboxes?

thanks in advance.

here is my plunker

Couldn't you pass a boolean into $scope.selectAll() to choose whether to select or deselect instead of looking up a DOM node inside the function? — ebyrob
– ebyrob, Commented Nov 7, 2016 at 18:33
@ebyrob if I'm passing boolean, the binging will be only one way, it will false or true. — antonyboom
– antonyboom, Commented Nov 7, 2016 at 18:39

Dominic Aquilina · Accepted Answer · 2016-11-07 18:41:20Z

1

The way you've done this binds a set of non-related entities to the same model, which means that you've bound them very tightly. Obviously the goal is to keep them separated, so you'll need a different model, and there are a few ways to do that.

Using Entirely Unique Models

One way to do this is to just make your code a little more general and then a series of unique models associated with each checkbox, like so:

html

<input type="checkbox"
       ng-model="model1.selectedAll" 
       ng-change="selectAll(categories1, model1.selectedAll">

JS

$scope.selectAll = function(array, value) {
  angular.forEach(array, function(item) {
    item.Selected = value;
  });
};

Using a Base Model

Alternatively,if you don't want to keep track of multiple variables, you can encapsulate them into a single base. This method is useful if you have dynamically-created elements.

html

<input type="checkbox"
       ng-model="modelSet[key].selectedAll" 
       ng-change="selectAll(categories, key)">

JS

$scope.selectAll = function(array, key) {
  angular.forEach(array, function(item) {
    item.Selected = $scope.modelSet[key].selectedAll;
  });
};

Whatever you do, note that your selection function is getting more information from the view and less information from the $scope. You want to provide your utility function with as much context as possible so that it can reused more reliably.

answered Nov 7, 2016 at 18:41

Dominic Aquilina

6073 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

antonyboom Over a year ago

Thank you Dominic, the second way is exactly what I was looking for.

Dominic Aquilina Over a year ago

Glad I could help :)

Collectives™ on Stack Overflow

different 'select all' checkboxes for different lists of checkboxes, angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related