Best IT Recipes

Filter results from 6 to 10 out of 100 with ng-repeat in AngularJS

I see the limitTo filter in the documents, which allows me to limit the first 5 or last 5 results, but I want to set where my limit starts, so I can show the second set of 5 results.

Is there a built-in filter for this?

+75
angularjs
Feb 10 '13 at 8:49
source share
10 answers

Since Angular 1.4.0, the limitTo filter accepts an optional begin argument:

 <div ng-repeat="item in items | limitTo:5:5">{{item}}</div>

In older versions, writing a custom filter is pretty simple. Here's a naive implementation based on Array#slice (note that you are passing the first and last index, not the score):

 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 work: http://jsfiddle.net/BinaryMuse/vQUsS/

Alternatively, you can simply steal the entire implementation of 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); } } }; }
+141
Feb 10 '13 at 9:09
source share

AngularJS provides this functionality out of the box. If you carefully read the limitTo documentation, you can specify a negative value for the limit. This means that there are N elements at the end, so if you want to process 5 results after offset 5, you need to do the following:

<div ng-repeat="item in items | limitTo: 10 | limitTo: -5">{{item}}</div>

+130
Jul 19 '13 at 22:04
source share

I started playing with client filters, but then I found out that you can just call slice inside the ng-repeat expression:

 <div ng-repeat="item in items.slice(6, 10)">{{item}}</div>
+38
Aug 27 '14 at 20:02
source share

As bluescreen said, this can be done using only the limitTo filter, although the problem with the last page that Harry Austrian has noticed needs additional work.

those. using the ui-bootstrap pagination :

 ng-model = page // current page items-per-page = rpp // records per page total-items = count // total number of records

The expression should be:

 <div ng-repeat="item in items | limitTo: rpp * page | limitTo: rpp * page < count ? -rpp : rpp - (rpp * page - count)">{{item}}</div>
+4
Jul 11 '14 at 15:57
source share

Here is an example of using a filter to offset and limit:

 <!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>

The example is based on the second stage of the AngularJS tutorial .

Note that the filter for the offset should be placed as the first filter if you want to cover the general case where the limit is uknnown.

+3
Jan 07
source share

from bluescreen answer:

 <div ng-repeat="item in items | limitTo: 10 | limitTo: -5">{{item}}</div>

you can also find a scenario where you need to take the Nth element to the last element , this is another way to use limitTo:

 <div ng-repeat="item in items | limitTo:-(items.length-5)>{{item}}</div>

a negative sign will take as much as items.length from the last, then minus 5 inside the bracket will skip the first 5 elements

+2
09 Oct '14 at 10:03
source share

There's a tidier way to do this without having to reference the filter and will behave more like a paginator:

 $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); };

And just stick to this, in your opinion:

 <ul> <li ng-repeat="item in itemsPaginated() | limitTo:itemsLimit">{{item}}</li> </ul>

Then you can simply increase / decrease $scope.page :

 $scope.page++;
+1
Aug 15 '14 at 14:28
source share

@bluescreen ans and @Brandon ans are not equivalent.

eg:

 var pageSize = 3; var page = 2; var items = [1, 2, 3, 4];

-

 item in items | limitTo: page*pageSize | limitTo: -1*pageSize

produce [2, 3, 4]

 item in items | slice: (page-1)*pageSize : page*pageSize

produce [4]

0
Feb 09 '15 at 21:47
source share

You can also create your own startFrom reusable filter as follows:

 myApp.filter('startFrom', function () { return function (input, start) { start = +start; return input.slice(start); } });

and then use it in your ng-repeat like this:

 ng-repeat="item in items | startFrom: 5 | limitTo:5

Thus, this is done “in the spirit of AngularJs filters”, being checked, it can have some “additional” logic if necessary, etc.

0
Sep 17 '15 at 23:03
source share

For ion-based projects, find the solution below:

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 } });
0
Jul 08 '16 at 12:11
source share


More articles:


All Articles