我正在使用angularjs并将数据绑定到表，并使用uib分页将分页添加到表中，在表中，我正在添加复选框以检查和取消选中行，这里是我单击“在标题，行中全部检查”时需要的应该只检查当前页面，但问题是它检查所有行，而与页面无关。
var myApp = angular.module('myApp', ['ui.bootstrap'])
.controller('employeeController', function($scope) {
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}];
$scope.employees = employees;
$scope.showHideAddNotes = function(vendorsId, $index) {
$scope.comments = vendorsId;
angular.forEach($scope.employees, function(vendr) {
if (vendr.VendID == $scope.comments) {
$scope.showComment = true;
}
})
}
$scope.pageSize = 10;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.pageSize;
$scope.maxSize = 5; //Number of pager buttons to show
$scope.totalItems = $scope.employees.length;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.setItemsPerPage = function(num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first page
}
//----------------------Check and Uncheck All Rows---------------
$scope.CheckUncheckHeader = function() {
$scope.IsAllChecked = true;
for (var i = 0; i < $scope.employees.length; i++) {
if (!$scope.employees[i].Selected) {
$scope.IsAllChecked = false;
break;
}
};
var batchcount = 0;
if ($scope.employees != undefined && $scope.employees.length > 0) {
$scope.employees.forEach(function(pageitem) {
if (pageitem.Selected)
employees++;
});
}
$scope.batchcount = batchcount;
};
$scope.CheckUncheckAll = function() { // Select and Unselect all Rows
$scope.batchcount = 0;
for (var i = 0; i < $scope.employees.length; i++) {
$scope.employees[i].Selected = $scope.IsAllChecked;
}
};
})<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div class="row">
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
<div class="col-md-12">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>
<input id="Checkbox1" type="checkbox" ng-show="CheckAccess" ng-model="IsAllChecked" name="CheckboxGroup" ng-change="CheckUncheckAll()" /></th>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) ">
<td>
<input id="Checkbox2" type="checkbox" ng-show="CheckAccess" ng-change="CheckUncheckHeader(emp)" name="checkname" ng-model="emp.Selected" ng-checked="emp.Selected" ng-disabled="emp.isDisabled" />
</td>
<td>{{emp.Name}}<br>
<div>
</div>
<div class="textarea-container" ng-model="commentsArea" ng-show="emp.showComment">
<div style="margin-bottom:5px;">
<textarea id="txtVendorNote{{$index}}" ng-modal="inputvendor" name="foo" placeholder="Add comments here..."></textarea>
</div>
<button class="btn btn-danger btn-sm" style="padding:2px 10px 2px 10px" ng-click="addNote(vendor.VendKey,$index)">Save</button>
</div>
</td>
<td>{{emp.City}}</td>
<td>{{emp.Country}}</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：1)
通过使用分页，您可以有效地过滤表上的行，并且每次仅显示n条记录。因此，您需要确保仅从显示的行中进行选择（与gmail等相同）。您可以像这样从ngRepeat表达式中获取这些记录
ng-repeat="row in vm.filtered = (vm.allRecords | limitTo : vm.showingAmount: (vm.currentPage -1) * vm.showingAmount)"
vm.displayedRecords是limitTo过滤器适用的项目，而vm.filtered是n可见记录，您在将过滤器应用于数据和您需要选择这些
我已经制作了一个demo plunk来演示这样做的干净方法