What is the best method for selecting or deselecting all checkboxes except for one using a single checkbox in angularjs

Question

What is the best method for selecting or deselecting all checkboxes except for one using a single checkbox in angularjs

$scope.checkAll = function() {
  if ($scope.selectedAll) {
    $scope.selectedAll = true;
  } else {
    $scope.selectedAll = false;
  }

  angular.forEach($scope.MyProducts, function(item) {
    item.Selected = $scope.selectedAll;
  });
  /*});*/
}

<div class="panel-heading col-xs-12">
  <h6 class="viewStyle col-xs-4"><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />Select All</h6>
</div>

<div id="gridView" ng-repeat="product in MyProducts">

  <input style="float:left" type="checkbox" ng-model="product.Selected" ng-checked="product.Selected" value="product.ProductId" />

</div>

Utilizing two nested divs, my attempt to implement a single checkbox that would automatically select all other checkboxes has proven unsuccessful. Below is the HTML markup and associated controller code. Any guidance would be greatly appreciated.

javascript css angularjs html

Answer 1

Answer №1

If you're wondering how to accomplish this, there's no need for the ng-checked attribute. Using ng-model alone can help you achieve your goal.

angular.module("myApp", []).controller("myCtrl", function($scope) {
  $scope.myProducts = [{
    selected: false,
    productId: 1,
    name: "CheckBox1"
  }, {
    selected: false,
    productId: 2,
    name: "CheckBox2"
  }];
  $scope.selectedAll = false;
  $scope.checkAll = function() {
    $scope.myProducts.forEach(function(product) {
      product.selected = !$scope.selectedAll;
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="panel-heading col-xs-12">
    <h6 class="viewStyle col-xs-4"><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />Select All</h6>
  </div>

  <div id="gridView" ng-repeat="product in myProducts">

    <input type="checkbox" ng-model="product.selected" value="product.productId">{{product.name}}</input>

  </div>
</div>

Answer 2

If you're wondering how to accomplish this, there's no need for the ng-checked attribute. Using ng-model alone can help you achieve your goal.

angular.module("myApp", []).controller("myCtrl", function($scope) {
  $scope.myProducts = [{
    selected: false,
    productId: 1,
    name: "CheckBox1"
  }, {
    selected: false,
    productId: 2,
    name: "CheckBox2"
  }];
  $scope.selectedAll = false;
  $scope.checkAll = function() {
    $scope.myProducts.forEach(function(product) {
      product.selected = !$scope.selectedAll;
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="panel-heading col-xs-12">
    <h6 class="viewStyle col-xs-4"><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />Select All</h6>
  </div>

  <div id="gridView" ng-repeat="product in myProducts">

    <input type="checkbox" ng-model="product.selected" value="product.productId">{{product.name}}</input>

  </div>
</div>

Answer 3

Answer №2

If you want to handle checkbox value changes, consider using ng-change instead of ng-click.

Here is an example in HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="panel-heading col-xs-12">
    <h6 class="viewStyle col-xs-4"><input type="checkbox" ng-model="selectedAll" ng-change="checkAll()" />Select All</h6>
  </div>

  <div id="gridView" ng-repeat="product in myProducts">

    <input type="checkbox" ng-model="product.selected" value="product.productId">{{product.name}}</input>

  </div>
</div>

In the controller:

$scope.checkAll = function() {
   angular.forEach($scope.myProducts, function(product) {
         product.selected = $scope.selectedAll;
   });
 };

You can see working code on PLUNKER here

Answer 4

If you want to handle checkbox value changes, consider using ng-change instead of ng-click.

Here is an example in HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="panel-heading col-xs-12">
    <h6 class="viewStyle col-xs-4"><input type="checkbox" ng-model="selectedAll" ng-change="checkAll()" />Select All</h6>
  </div>

  <div id="gridView" ng-repeat="product in myProducts">

    <input type="checkbox" ng-model="product.selected" value="product.productId">{{product.name}}</input>

  </div>
</div>

In the controller:

$scope.checkAll = function() {
   angular.forEach($scope.myProducts, function(product) {
         product.selected = $scope.selectedAll;
   });
 };

You can see working code on PLUNKER here

What is the best method for selecting or deselecting all checkboxes except for one using a single checkbox in angularjs

Answer №1

Answer №2

Similar questions

cross-domain ajax response

Enlarging and cutting video footage

Transferring an object from the factory to the controller

How come AngularJS $onChanges isn't able to detect the modification in the array?

I'm trying to figure out how to retrieve data from a JQuery autocomplete response that contains an array. Specifically, I want

Ways to fix text overlap in a pill

Troubleshooting a layoutUnit problem with Primefaces southern region

There are a few issues with certain Bootstrap elements such as the Navbar-collapse, p- classes, and small column images

Ensuring the accuracy of phone numbers with the power of AngularJS

Angular: Implementing asynchronous data retrieval for templates

Design an ARIA menu role with HTML and CSS code

Guide on populating a dropdown menu dynamically in php based on the selection made in another dropdown

Updating elements within a subarray in JavaScript can easily be accomplished by accessing the

Vuetify's Handy Helper Classes

What is the best way to implement a sidebar closing animation?

Looking for a solution to align the header properly in your React app?

Is there a way to incorporate multiple rows into my table row headings?

JavaScript Evaluation Test Outcome

How to Target HTML Tags Locally using CSS Modules in Next.js?

Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net