[英]angular pagination directive not working
我创建了一个分页指令,该指令可与整个站点的网格一起使用。 在此页面上,我进行了搜索,该搜索将返回一组新数据,并且我想将该数据传递到我的指令中,以便随后具有新的分页。 目前,我只有链接功能。
指令html
<table-pagination current-page="1" num-per-page="5" max-size="5" pagination-data="membersData" get-filtered-data="getFilteredData(membersData)" returned-paginated-data="returnedPaginatedData(data)"></table-pagination>
指令
myAppModule.directive('tablePagination',
function () {
return {
templateUrl: 'Scripts/app/templates/tmplPagination.html',
restrict: 'E',
scope: {
currentPage: '=',
numPerPage: '=',
maxSize: '=',
paginationData: '=',
getFilteredData: '=',
filteredMembersData: '&'
},
link: function (scope, elem, attrs) {
scope.getFilteredData = function () {
$scope.$watch('currentPage + numPerPage', function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage), end = begin + $scope.numPerPage;
$scope.filteredMembersData = scope.paginationData.slice(begin, end);
});
}
},
controller: [
'$scope', function ($scope) {
}]
}
});
分页模板
<h4>Total number of records: {{membersData.length}}</h4>
<pagination ng-model="currentPage" total-items="membersData.length" max-size="maxSize" boundary-links="true"></pagination>
联系人搜索控制器
$scope.returnedPaginatedData = function(data) {
$scope.filteredMembersData = data;
}
我想将$ scope.filteredMembersData传递给我的指令,以便它重新呈现我的分页。
任何想法如何使它工作?
这是我的解决方案:
指令HTML
<table-pagination current-page="1" num-per-page="5" max-size="5" source-data="membersData" grid-data="gridData"></table-pagination>
我就网格的外观和数据源(整个数据)进行了一些设置。 我还传递了一个数组(gridData)
Directive.js
myAppModule.directive('tablePagination',
function () {
return {
templateUrl: 'Scripts/app/templates/tmplPagination.html',
restrict: 'E',
scope: {
currentPage: '=',
numPerPage: '=',
maxSize: '=',
sourceData: '=',
gridData: '='
},
link: function (scope, elem, attrs) { // need this for when pagination is clicked
scope.$watch('currentPage + numPerPage', function () {
var begin = ((scope.currentPage - 1) * scope.numPerPage), end = begin + scope.numPerPage;
scope.gridData = scope.sourceData.slice(begin, end);
});
},
controller: [
'$scope', function ($scope) {
$scope.$watch('sourceData', function () { // need this for when data changes
var begin = (($scope.currentPage - 1) * $scope.numPerPage), end = begin + $scope.numPerPage;
$scope.gridData = $scope.sourceData.slice(begin, end);
});
}]
}
});
我监视数据何时更改,另外一个监视当前页面和编号页面。 当我单击分页以转到下一组数据时,这些充当事件句柄。
template.html
<div>
<h4>Total number of records: {{sourceData.length}}</h4>
<pagination ng-model="currentPage" total-items="sourceData.length" max-size="maxSize" boundary-links="true"></pagination>
</div>
我在这里有一些分页html来配置它。
我可以将其插入到网站上的任何网格中,我只需要一些数据和空数组即可将数据集显示在网格中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.