Question

我有一个表，其中每行都有一个复选框，另一个表中有一个复选框用于选中所有行（复选框），并将选定/所有行的ID作为JSON对象发送。

我有一个来自（GET）响应的对象数组（启用了服务器端分页），并将其存储在 itemsList $ scope变量中。

以下是我的代码。

查看

<table class="table">
    <thead>
        <tr>
            <th><input type="checkbox" ng-model="allItemsSelected ng-change="selectAll()"></th>
            <th>Date</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in itemsList track by $index" ng-class="{selected: item.isChecked}">
            <td>
                <input type="checkbox" ng-model="item.isChecked" ng-change="selectItem(item)">
            </td>
            <td>{{item.date | date:'dd-MM-yyyy'}}</td>
            <td>{{item.id}}</td>
        </tr>
    </tbody>
</table>

控制器

$scope.itemsList = [
    {
        id : 1,
        date : '2019-04-04T07:50:56'
    },
    {
        id : 2,
        date : '2019-04-04T07:50:56'
    },
    {
        id : 3,
        date : '2019-04-04T07:50:56'
    }
];
$scope.allItemsSelected = false;
$scope.selectedItems = [];

// This executes when entity in table is checked
$scope.selectItem = function (item) {

    // If any entity is not checked, then uncheck the "allItemsSelected" checkbox
    for (var i = 0; i < $scope.itemsList.length; i++) {
        if (!this.isChecked) {
            $scope.allItemsSelected = false;
            // $scope.selectedItems.push($scope.itemsList[i].id);
            $scope.selectedItems.push(item.id);
            return
        }
    }

    //If not the check the "allItemsSelected" checkbox
    $scope.allItemsSelected = true;

};

// This executes when checkbox in table header is checked
$scope.selectAll = function() {

    // Loop through all the entities and set their isChecked property
    for (var i = 0; i < $scope.itemsList.length; i++) {
        $scope.itemsList[i].isChecked = $scope.allItemsSelected;

        $scope.selectedItems.push($scope.itemsList[i].id);
    }

};

以下是我面临的问题...

如果您查看小提琴示例，则可以在 checkAll（）上看到该数组已更新为所有可用列表。但是，如果再次单击 checkAll（）而不是从数组中删除列表，它将再次在同一对象数组上添加另一行。
如果我单击任意行的复选框，我也想做同样的事情（从数组中添加/删除数组）
如果我手动选中所有复选框，则还应选中thead复选框。

Answer 1

我认为您在正确的道路上。我认为只为所选项目设置一个数组不是一个好主意，而是可以使用项目的isSelected属性。这是一个有效的小提琴：http://jsfiddle.net/MSclavi/95zvm8yc/2/。

如果您必须将选定的项目发送到后端，则可以对这些项目进行过滤（如果使用选中）

var selectedItems = $scope.itemsList.filter(function (item) {
    return !item.isChecked;
});

希望有帮助

Answer 2

这将帮助您解决以下两个疑问之一：

$scope.selectAll = function() {
    if($scope.allItemsSelected){
        for (var i = 0; i < $scope.itemsList.length; i++) {
            $scope.itemsList[i].isChecked = $scope.allItemsSelected;
            $scope.selectedItems.push($scope.itemsList[i].id);
        }
    }else{
        for (var i = 0; i < $scope.itemsList.length; i++) {
            scope.itemsList[i].isChecked = $scope.allItemsSelected;
        }
        $scope.selectedItems = [];
    }
};

我正在寻找实现第2点解决方案的方法。可以使用 ng-checked ，但不能将 ng-checked 与 ng-model 一起使用。

AngularJS选中/取消选中ng-repeat对象数组中的所有复选框

2 个答案: