Angularjs：全选复选框答案

【问题标题】：Angularjs: Select all checkboxAngularjs：全选复选框
【发布时间】：2015-06-17 23:27:53
【问题描述】：

我想实现全选复选框（用于多次删除）。

这是我的视图脚本：

<input type="checkbox" name="chk_all" id="chk_all"  ng-click="checkAll(this)" /> Select All
<table>
    <tr ng-repeat="user in allUsers">
    <td><input type="checkbox" ng-model="list" name="list[]" class="chk_all" value="{{user.user_id}}" id="{{user.user_id}}"  ng-checked="checkedAll"  /></td>
    <td>{{user.username}}</td>
    <td>{{user.fname}}</td>
    <td>{{user.lname}}</td>
    <td>{{user.mobile}}</td>
    <td>{{user.email}}</td>
    <td><a title="Edit User" href="#/edit_user/{{user.user_id}}" ><span class="fa fa-pencil"></span></a> | <a title="Delete User"  id=""  style="cursor:pointer;"  ng-click="delete_user(user.user_id)" ><span class="fa fa-trash-o"></span></a></td>
    </tr>
</table>

在"chk_all" 复选框后面的所有复选框应选中或取消选中。

我想在单击按钮时删除选定的用户。那么如何在 http post 方法中获取选定的用户 ID。

脚本写成：

$scope.testFunction=function(params)
        {
            $http.post("../admin/users/testFunction",{'params' : params}) 
                .success(function (data, status, headers, config) 
                { 
                console.log(data);
                alert(1);
                })

                .error(function(data, status, headers, config){

                });
        }

控制器功能：

public function testFunction()
    {
        $data = json_decode(file_get_contents("php://input"));
        print($data->params);
    }

在 testFunction（php 函数）中，我如何检索选定的用户 ID？有什么解决办法吗？ 注意：我已经用 javascript 和 php 完成了。现在应用程序要转换成 Angularjs，所以它应该在 angularjs 中。

【问题讨论】：

标签： angularjs

【解决方案1】：

你可以给对象'user'一个属性：'checked'，然后复选框看起来像：<input type="checkbox" name="list[]" class="chk_all" ng-model="user.checked" onclick="uncheck_select_all(this)" />。然后在提交时，检查 allUsers 中的每个用户是否 user.checked == true，如果是，则将该用户推送到数组。然后将该数组放入您的 http 帖子中，并在服务器端为数组中的每个用户处理删除操作。

更新

在this plnkr 我用我的答案+ cmets 展示了我的意思。如果您只是复制粘贴，这不起作用，因为我使用了一些不同的命名。如果你不能用这个 plunker 找出解决方案，恐怕我已经尽我所能了。注意：您可以将 angular.forEach 循环替换为常规 for 循环，以获得稍快的性能。

【讨论】：

如何将 user.user_id 设置为复选框？有示例代码吗？
如果您在提交中遍历 allUsers，如果属性 user.checked == true，您可以将 user.user_id 放入一个数组中。但是，如果您纯粹希望 user.user_id 作为复选框的值，您可以简单地将 value="{{user.user_id}}" 添加到您的复选框
好的。美好的。我已经将值设置为复选框。作为值 =“{{user.user_id}}”。现在我想选中或取消选中所有。
您可以使用 ng-checked 作为他的回答中所说的 area28。您还可以遍历 allUsers 并在您的 checkAll(this) 函数中将所有 user.checked 属性设置为 true。
你说你知道javascript和php对吧？ area28 的 checkAll 函数可以简单地更改为：$scope.toggleCheckAll = function() { $scope.checkedAll = !$scope.checkedAll; } 这将全部选中或全部取消选中

【解决方案2】：

在Angular Docs 中结帐ng-checked。

您可以根据$scope 变量将表达式添加到要检查的每个复选框。

<input type="checkbox" name="chk_all" id="chk_all"  ng-click="checkAll(this)" />
<input type="checkbox" name="chk_1" id="chk_1"  ng-checked="checkedAll" />
<input type="checkbox" name="chk_2" id="chk_2"  ng-checked="checkedAll" />
<input type="checkbox" name="chk_3" id="chk_3"  ng-checked="checkedAll" />

在您的控制器中，您将拥有以下内容：

$scope.checkAll = function() {
    $scope.checkedAll = true;
}

这会将$scope.checkedAll 变量设置为true，使ng-checked 表达式为true，这将检查所有使用该表达式的复选框。

我也将onchange 属性更改为ng-click。

【讨论】：