AngularJS，在 ng-repeat 下的用户列表中选中复选框时显示删除按钮的简单方法

Question

我正在尝试切换已绑定功能的删除按钮。该列表是使用 ng-repeat 检查用户对象创建的。但到目前为止我看到的方法要么是简单的模型展示，但在我的情况下不起作用。或者复杂的指令控制器方法。

我只需要检查是否至少选中了一个复选框。这是代码片段：

                    <table class="table">
                    <tr ng-repeat="user in ctrl.commonUserService.users | filter:ctrl.commonUserService.suppressLoggedOnUserFilter()">

                        <td><input type="checkbox" ng-model="user.selected" value="y" /></td>
                        <td title="User Name"><strong>{{user.userName}}</strong></td>

如何使用 Angular 轻松完成此操作？我试图创建一个循环用户的函数，并查看他们是否被选中，但我认为我不能将这个函数放到 ng-show 中。

Answer 1

当状态改变时，您必须检查是否至少选中了一个框：

<td><input type="checkbox" ng-model="user.selected" ng-change="ctrl.userSelected()" value="y" /></td> <!-- use ng-change to notify when a checkbox is clicked -->

<button ng-click="ctrl.delete()" ng-show="ctrl.usersSelected">Delete</button> <!-- if ctrl.usersSelected is true show delete -->

在控制器中：

this.userSelected = function userSelected() { // when checkbox is clicked check users to see if at least one is selected and save the state in this.userSelected
    this.usersSelected = this.commonUserService.users.some(function(user) {
        return user.selected;
    });
};

Answer 2

您可以在输入中使用 ng-change 指令相当轻松地完成此操作。有关工作示例，请参阅此 plunkr，但它基本上是这样的：

查看：

<table class="table">
    <tr ng-repeat="user in users">
    <td><input type="checkbox" ng-change="isSelected()" ng-model="user.selected" /></td>
    <td title="User Name"><strong>{{user.userName}}</strong></td>
    </tr>
</table>
<button class="delete" ng-show="showDelete">Delete</button>

控制器:

$scope.isSelected = function() {
    var somethingSelected = false;
    $scope.users.forEach(function(user, index) {
        if (user.selected) somethingSelected = true;
    });
    $scope.showDelete = somethingSelected;
};

AngularJS，在 ng-repeat 下的用户列表中选中复选框时显示删除按钮的简单方法

AngularJS, easy way to show a delete button when a checkbox is checked in the list of users under ng-repeat

javascript

angularjs

angularjs-ng-show