使用 Angular JS 选择所有复选框

Posted 2023-03-05

【中文标题】使用 Angular JS 选择所有复选框

【英文标题】：select all checkboxes with angular JS

【发布时间】：2016-07-03 18:01:23

【问题描述】：

我正在尝试用一个复选框选择所有复选框。但是该怎么做呢？

这是我的 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>

我创建了一个额外的复选框来选择和取消选择所有复选框。

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

【问题讨论】：

或许能帮到你***.com/questions/35914431/…

usersetting(user) 函数被调用时是否发生了什么？也许当您检查所有复选框时，该函数中的某些内容会拒绝请求和/或取消选中该框？

这个问题就像一个副本的副本。@hadiJZ 的链接应该可以满足您的目的。

【参考方案1】：

尝试在选中顶部复选框时针对每个要选中的用户设置复选框：

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

【参考方案2】：

简单使用如下代码

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

【参考方案3】：

您错过了带有ng-controller 和ng-app 和angular.module 的容器div。

user.select = $scope.selectAll 是正确的变体。

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

【讨论】：

都不适合我：/但是谢谢！ :) 也许还有其他问题：/ 我已经在 pasteBin... app.js 和 HTML pastebin.com/7eJu14nd pastebin.com/tq10Gtjb 中创建了我的代码 我刚刚删除了 apiomat 的脚本

@Paili 1. OnLoad 引用了一个不存在的函数。 2.你的js代码必须在html中after angular.js（比如app.js）。工作代码：pastebin.com/rMgmiRgW

【参考方案4】：

这是一个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;
    );
  
);