在AngularJS中使用ng-repeat筛选结果中的第6至10个结果
我在文档中看到了limitTofilter，它允许我限制前5个或后5个结果，但是我想设置限制开始的位置，以便显示第二组5个结果。
有没有内置的filter？
由于Angular 1.4.0， limitTofilter有一个可选的begin参数：
<div ng-repeat="item in items | limitTo:5:5">{{item}}</div>
在旧版本中，编写自定义filter相当简单。 下面是基于Array#slice （注意传递第一个和最后一个索引，而不是一个计数）：
app.filter('slice', function() { return function(arr, start, end) { return (arr || []).slice(start, end); }; });
<div ng-repeat="item in items | slice:6:10">{{item}}</div>
工作jsFiddle： http : //jsfiddle.net/BinaryMuse/vQUsS/
或者，您可以简单地窃取整个Angular 1.4.0的limitTo实现 ：
function limitToFilter() { return function(input, limit, begin) { if (Math.abs(Number(limit)) === Infinity) { limit = Number(limit); } else { limit = toInt(limit); } if (isNaN(limit)) return input; if (isNumber(input)) input = input.toString(); if (!isArray(input) && !isString(input)) return input; begin = (!begin || isNaN(begin)) ? 0 : toInt(begin); begin = (begin < 0 && begin >= -input.length) ? input.length + begin : begin; if (limit >= 0) { return input.slice(begin, begin + limit); } else { if (begin === 0) { return input.slice(limit, input.length); } else { return input.slice(Math.max(0, begin + limit), begin); } } }; }
AngularJS提供的function已经开箱即用。 如果您仔细阅读limitTo文档，您可以指定限制的负值。 这意味着最后有N个元素，所以如果你想在5的偏移量之后处理5个结果，你需要做下面的事情：
<div ng-repeat="item in items | limitTo: 10 | limitTo: -5">{{item}}</div>
我开始玩顾客filter，但发现你可以在ng-repeatexpression式中调用slice ：
<div ng-repeat="item in items.slice(6, 10)">{{item}}</div>
正如bluescreen所说的，只能使用limitTofilter，尽pipe处理Harry Oosterveen注意到的最后一页问题需要一些额外的工作。
即使用ui-bootstrap pagination指令属性：
ng-model = page // current page items-per-page = rpp // records per page total-items = count // total number of records
expression应该是：
<div ng-repeat="item in items | limitTo: rpp * page | limitTo: rpp * page < count ? -rpp : rpp - (rpp * page - count)">{{item}}</div>
这是一个关于如何过滤带有偏移和限制的列表的function性示例：
<!doctype html> <html lang="en" ng-app="phonecatApp"> <head> <script src="lib/angular/angular.js"></script> <script src="js/controllers.js"></script> </head> <body ng-controller="PhoneListCtrl"> Offset: <input type="text" ng-model="offset" value="0" /><br /> Limit: <input type="text" ng-model="limit" value="10" /><br /> <p>offset limitTo: {{offset - phones.length}}</p> <p>Partial list:</p> <ul> <li ng-repeat="phone in phones | limitTo: offset - phones.length | limitTo: limit"> {{$index}} - {{phone.name}} - {{phone.snippet}} </li> </ul> <hr> <p>Whole list:</p> <ul> <li ng-repeat="phone in phones"> {{$index}} - {{phone.name}} - {{phone.snippet}} </li> </ul> </body> </html>
这个例子是基于AngularJS教程的第二步 。
请注意，如果要覆盖限制未知的一般情况，则必须将偏移量的filter作为第一个filter。
来自bluescreen回答：
<div ng-repeat="item in items | limitTo: 10 | limitTo: -5">{{item}}</div>
你也可以find一个场景，你需要把第N个项目直到最后一个项目 ，这是使用limitTo的另一种方法：
<div ng-repeat="item in items | limitTo:-(items.length-5)>{{item}}</div>
负号会从上次的items.length中取出，然后在括号内减5将跳过前5个项目
有一个更简单的方法来做到这一点，而不必调用一个filter，并会更像一个摊派员：
$scope.page = 0; $scope.items = [ "a", "b", "c", "d", "e", "f", "g" ]; $scope.itemsLimit = 5; $scope.itemsPaginated = function () { var currentPageIndex = $scope.page * $scope.itemsLimit; return $scope.items.slice( currentPageIndex, currentPageIndex + $scope.itemsLimit); };
只要坚持你的看法：
<ul> <li ng-repeat="item in itemsPaginated() | limitTo:itemsLimit">{{item}}</li> </ul>
那么你可以增加/减less$scope.page ：
$scope.page++;
@ bluescreen的答案和@布兰登的答案是不相等的。
例如：
var pageSize = 3; var page = 2; var items = [1, 2, 3, 4];
–
item in items | limitTo: page*pageSize | limitTo: -1*pageSize
产生[2,3,4]
item in items | slice: (page-1)*pageSize : page*pageSize
产生[4]
您也可以创build自己的可重用filterstartFrom，如下所示：
myApp.filter('startFrom', function () { return function (input, start) { start = +start; return input.slice(start); } });
然后在你的ng中重复使用它，如下所示：
ng-repeat="item in items | startFrom: 5 | limitTo:5
这样做是“以AngularJsfilter的精神”完成的，可testing的，如果需要的话可以有一些“额外的”逻辑。
对于基于离子的项目，请find以下解决scheme：
mainpage.html：
<ion-view view-title="My Music"> <ion-content> <ion-list> <ion-item ng-repeat="track in tracks | limitTo: limit | limitTo: -10 "> {{track.title}} </ion-item> </ion-list> <div class="list"></div> <div align="center"> <button class="button button-small button-positive" ng-disabled="currentPage == 0" ng-click="decrementLimit()"> Back </button> <button class="button button-small button-energized"> {{currentPage+1}}/{{numberOfPages()}} </button> <button class="button button-small button-positive" ng-disabled="currentPage >= data_length/pageSize - 1" ng-click="incrementLimit()"> Next </button> </div> </ion-content> </ion-view>
controller.js：
var myApp = angular.module('musicApp.controllers', []); myApp.controller('AppCtrl', function($scope, $http) { console.log('AppCtrl called'); // $scope.tracks = MusicService.query(); $http.get('api/to/be/called').then(function(result){ $scope.tracks = result.data['results']; $scope.data_length = $scope.tracks.length; console.log(result) // console.log($sco pe.tracks.length) }); var currentPage = 0; $scope.pageSize = 10; $scope.numberOfPages = function(){ return Math.ceil($scope.tracks.length/$scope.pageSize); } var limitStep = 10; $scope.limit = limitStep; $scope.currentPage = currentPage; $scope.incrementLimit = function(){ $scope.limit += limitStep; $scope.currentPage += 1 }; $scope.decrementLimit = function(){ $scope.limit -= limitStep; $scope.currentPage -= 1 } });
