我有一个表,其中每行都有一个复选框,另一个表中有一个复选框用于选中所有行(复选框),并将选定/所有行的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);
}
};
以下是我面临的问题...
答案 0 :(得分:0)
我认为您在正确的道路上。我认为只为所选项目设置一个数组不是一个好主意,而是可以使用项目的isSelected
属性。这是一个有效的小提琴:http://jsfiddle.net/MSclavi/95zvm8yc/2/。
如果您必须将选定的项目发送到后端,则可以对这些项目进行过滤(如果使用选中)
var selectedItems = $scope.itemsList.filter(function (item) {
return !item.isChecked;
});
希望有帮助
答案 1 :(得分:0)
这将帮助您解决以下两个疑问之一:
$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 一起使用。