выберите все флажки с угловым JS

Question

Я пытаюсь установить все флажки с одним единственным флажком. Но как это сделать?

Это мой 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> 

создать дополнительный флажок, чтобы selecet и снять все галочки.

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

Я попытался это тоже, но ни один из них не работает для меня :(

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

Answer 1

Вы пропустили контейнер дивы с ng-controller и ng-app и angular.module.

user.select = $scope.selectAll - правильный вариант.

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

Answer 2

Вот JSFiddle вы можете использовать ng-checked с переменной на него, как user.checked (или используйте user.select, как вы хотите)

<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

Простое использование следующий код

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

Answer 4

Попробуйте установить проверенные коробки против каждого пользователя, чтобы проверить, когда верхний флажок проверено:

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