select all checkboxes with angular JS

后端 未结 4 2176
不思量自难忘°
不思量自难忘° 2020-12-21 02:22

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

This is my HTML:

    

        
相关标签:
4条回答
  • 2020-12-21 02:47

    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);
                });
                   }
    
    0 讨论(0)
  • 2020-12-21 02:51

    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;
        });
      }
    });
    
    0 讨论(0)
  • 2020-12-21 02:53

    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>
    
    0 讨论(0)
  • 2020-12-21 03:00

    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/

    0 讨论(0)
提交回复
热议问题