AngularJS offers a variety of 'select all' checkboxes tailored for specific lists of checkboxes

Question

AngularJS offers a variety of 'select all' checkboxes tailored for specific lists of checkboxes

Within my webpage, I have three different sets of checkboxes. Each set includes a "select all" checkbox. Instead of repeating code lines, I am implementing a single function with a parameter to select specific checkboxes within each set.

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

Here is the HTML:

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

This approach allows me to easily select all checkboxes in a specific array. However, there is an issue - $scope.model.selectedAll affects all lists, causing the "select all" checkbox to be checked in every list when selected in one.

While I understand the problem, I am unsure how to address it. I have considered creating separate variables for each list, but since the function uses a parameter and the array is unknown, associating a variable with it would not work.

Is there a solution to this problem that does not involve duplicating code for individual sets of checkboxes?

Thank you in advance.

here is my plunker

javascript angularjs checkbox

Answer 1

Answer №1

Your approach in linking various entities to the same model tightly isn't ideal as it hinders their separation. To achieve better separation, consider using distinct models for each entity. Here are a few strategies you can implement:

Employing Unique Models

One method is to enhance your code's generality by creating individual models for every checkbox, like this:

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

Utilizing a Base Model

Alternatively, if managing numerous variables seems cumbersome, group them under a single base model - especially useful for dynamically generated 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;
  });
};

Remember, ensure that your selection function retrieves necessary information from the view rather than relying solely on $scope. Providing context to utility functions enhances reusability and reliability.

Answer 2

Your approach in linking various entities to the same model tightly isn't ideal as it hinders their separation. To achieve better separation, consider using distinct models for each entity. Here are a few strategies you can implement:

Employing Unique Models

One method is to enhance your code's generality by creating individual models for every checkbox, like this:

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

Utilizing a Base Model

Alternatively, if managing numerous variables seems cumbersome, group them under a single base model - especially useful for dynamically generated 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;
  });
};

Remember, ensure that your selection function retrieves necessary information from the view rather than relying solely on $scope. Providing context to utility functions enhances reusability and reliability.

AngularJS offers a variety of 'select all' checkboxes tailored for specific lists of checkboxes

Answer №1

Similar questions

Using a CSS button to activate a JavaScript function: A step-by-step guide

Having trouble retrieving exchange rates from the state in React after making an API call

Resolving CORS problem: Eliminating the 'Access-Control-Allow-Origin' Response Header in Angular

Initiate an animation in Wordpress once the entire page has finished loading

In a scenario where multiple fields need to be incremented, one can accomplish this by incrementing one field every time while also increasing the other field only if it exceeds a

What is the best way to merge two AngularJS form validation directives criteria using CSS?

Retrieve a JSP list item using JavaScript

Using jQuery to detect changes made with jQuery while updating

Having trouble with React and Webpack's Extract Text Plugin. I can't seem to get my styles to work from bundle.css, even though they are functioning fine from bundle.js. Any advice on

I'm struggling to make this script replace the values within the table

One issue encountered in the AngularJS library is that the default value does not function properly in the select element when the value and

Preserving scroll position during page navigation in Next.js

What steps do I need to follow in order to set up webpack.config.js to convert my HTML file to JS in a Reactjs application

Exploring the integration of JSONP with the unmatched features of Google

What could be the reason for the malfunction of this angular binding?

Using Regular Expressions in an ExpressJS Router

The jwplayer getDuration function functions correctly in the Chrome console, but it encounters issues when used in C# alongside IJavaScript

What is the technique for choosing the parent's ID with jQuery?

Interactive pop-up windows in Bootstrap

Is it necessary to have two servers in order to operate an ext JS application using Node.js on the server side?