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的容器div。

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

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

JS：

error : ILT0021: Could not resolve method 'System.Nullable<System.Double> $95_Windows.Graphics.Display.DisplayInformation.get_DiagonalSizeInInches()

Answer 3

在选中顶部复选框时，尝试为要检查的每个用户设置复选框：

<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

简单使用以下代码

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

选择带有角度JS的所有复选框

4 个答案: