select all checkboxes with angular JS

Question

I am trying to select all 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 extra checkbox to selecet and unselect all 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 works for me :(

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

Is something happening when the usersetting(user) function is called? perhaps when you're checking all the checkboxes something in that function is refusing the request, and/or unchecking the box? — Rob Scott
– Rob Scott, Commented Mar 17, 2016 at 11:55
This question is like a duplicate of a duplicate.The link by @hadiJZ, should serve your purpose. — Satej S
– Satej S, Commented Mar 17, 2016 at 11:57

Gosha U. · Accepted Answer · 2016-03-17 11:59:24Z

5

You are missed the container divs with ng-controller and ng-app and angular.module.

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

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

answered Mar 17, 2016 at 11:59

Gosha U.

6231 gold badge4 silver badges16 bronze badges

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

2 Comments

Paili Over a year ago

neither works for me :/ But Thanks! :) Maybe there is an other issue :/ I've cpoied my Code in pasteBin... app.js and HTML pastebin.com/7eJu14nd pastebin.com/tq10Gtjb I just deleted the script for apiomat

Gosha U. Over a year ago

@Paili 1. OnLoad references an unexistent function. 2. Your js code must be after angular.js in html (like app.js, for example). Working code: pastebin.com/rMgmiRgW

Alison Muddle · Accepted Answer · 2016-12-05 23:05:48Z

2

Try setting the checked boxes against each user to be checked when the top checkbox is checked:

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

answered Dec 5, 2016 at 23:05

Alison Muddle

211 bronze badge

Comments

michelem · Accepted Answer · 2016-03-17 11:56:02Z

Here is a JSFiddle you can use ng-checked with a variable on it like user.checked (or use the 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;
    });
  }
});

Gurpinder · Accepted Answer · 2016-03-17 12:07:03Z

0

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

answered Mar 17, 2016 at 12:07

Gurpinder

6521 gold badge5 silver badges20 bronze badges

Collectives™ on Stack Overflow

select all checkboxes with angular JS

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related