我正在使用角度并尝试创建分页功能。
我有类似
的东西角度控制器
appModule.controller('testCtrl', ['$scope', function ($scope) {
$scope.numbers = 7;
}])
HTML：
<button ng-repeat=' not sure what to do here'>{{number.days}}</button>
//display more buttons...
按钮文本将类似于1,2,3,4 ...取决于我们从数据中获得的总页数。
我不知道如何做到这一点。谁能帮帮我呢？
感谢。
答案 0 :(得分：1)
ng-repeat仅适用于集合，因此您必须定义$scope.numbers=[0,1,2,3,4,5,6,7]，然后执行以下操作：
<button ng-repeat='number in numbers'>{{number}}</button>
或者，您可以使用返回数组的函数
<button ng-repeat='i in buildNumbers( number )'></button>在number和$scope.number = 7等范围内定义了buildNumber，将数字转换为数组。
答案 1 :(得分：1)
我建议使用ng-grid - 一个角度高性能的数据网格来渲染行，当你有很多行时它真的很闪耀，它有许多很好的功能，如过滤，排序和当然分页。
示例：
HTML：
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
JS：
app.controller('MyCtrl', function($scope, $http) {
$scope.filterOptions = {
filterText: "",
useExternalFilter: true
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [250, 500, 1000],
pageSize: 250,
currentPage: 1
};
$scope.setPagingData = function(data, page, pageSize){
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.myData = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('jsonFiles/largeLoad.json').success(function (largeLoad) {
data = largeLoad.filter(function(item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
$scope.setPagingData(data,page,pageSize);
});
} else {
$http.get('jsonFiles/largeLoad.json').success(function (largeLoad) {
$scope.setPagingData(largeLoad,page,pageSize);
});
}
}, 100);
};
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions', function (newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function (newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showFooter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions
};
});
答案 2 :(得分：1)
有Tutorials将向您展示如何使用AngularJS和ng-repeat。然后，如果你combine Bootstrap pagination，你可以很容易地实现你想要的东西
在您的控制器中：
App.controller('PageCtrl', function ($scope) {
$scope.pages = {1, 2, 3, 4, 5, 6, 7};
}
在HTML中：
<ul class="pagination" ng-repeat="page in pages">
<li><a href="#/Page{{page}}">{{page}}</a></li>
</ul>