Select all checkboxes using angular JS

Question

I am trying to select all the checkboxes with one single checkbox. But how to do that?

This is my HTML:

<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" /> <!-- userlist --> <!--<div id="scrollArea" ng-controller="ScrollController">--> <table class="table"> <tr> <th>User ID</th> <th>User Name</th> <th>Select</th> </tr> <tr ng-repeat="user in users | filter:search"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td><input type="checkbox" ng-click="usersetting(user)" ng-model="user.select"></td> <td><tt>{{user.select}}</tt><br/></td> </tr> </table> 

I create an additional checkbox to select and deselect all the checkboxes.

JS:

 .controller('UsersCtrl', function($scope, $http){ $http.get('users.json').then(function(usersResponse) { $scope.users = usersResponse.data; }); $scope.checkAll = function () { angular.forEach($scope.users, function (user) { user.select = true; }); }; }); 

I tried this too, but none of them work for me :(

  $scope.checkAll = function () { angular.forEach($scope.users, function (user) { user.select = $scope.selectAll; }); }; 

Answer 1

You are missing a container div with ng-controller and ng-app and angular.module .

user.select = $scope.selectAll is the correct option.

https://jsfiddle.net/0vb4gapj/1/

Answer 2

Here is a JSFiddle you can use ng-checked with a variable on it as user.checked (or use user.select as you want)

 <div ng-app="app" ng-controller="dummy"> <table> <tr ng-repeat="user in users"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td> <input type="checkbox" ng-click="usersetting(user)" ng-checked="user.checked" ng-model="user.select"> </td> <td><tt>{{user.select}}</tt> <br/> </td> </tr> </table> <button ng-click="checkAll()">Check all</button> </div> 

JS:

 var app = angular.module("app", []); app.controller('dummy', function($scope) { $scope.users = [{ id: 1, name: "Hello", select: 1 }, { id: 2, name: "World", select: 1 }, ]; $scope.checkAll = function() { angular.forEach($scope.users, function(user) { user.checked = 1; }); } }); 

Answer 3

Try checking the boxes for each user to check when the top-level check box is selected:

 <input type="checkbox" ng-model="selectAll"/> <table class="table"> <tr> <th>User ID</th> <th>User Name</th> <th>Select</th> </tr> <tr ng-repeat="user in users | filter:search"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td><input type="checkbox" ng-click="usersetting(user)" ng-model="user.select" ng-checked="selectAll"></td> <td><tt>{{user.select}}</tt><br/></td> </tr> </table> 

Answer 4

Just use the following code

HTML

 <input type="checkbox" ng-model="checkboxes.checked" data-ng-click="checkAll()" class="select-all" value="" /> 

Js

  $scope.checkAll = function() { angular.forEach($scope.users, function(item) { $scope.checkboxes.items[item._id] = $scope.checkboxes.checked; $scope.selection.push(item._id); }); }