AngularJS limitTo filter

Question

I understand that in AngularJS the filter called "limitTo" is used to limit the data.

Lets say that we have a 100 records and we limit the data to 10 records using the limitTo filter.

Now how can i display the remaining 90 records. I need some sort of next and previous button on the bottom which should show me the next 10 records when i click on it and so on.

How can i achieve this without compromising any performance. Please provide code if you can. Thanks... :-)

take a look http://stackoverflow.com/questions/10816073/how-to-do-paging-in-angularjs — Kobi Cohen, Apr 23 '16 at 21:50

score 2 · Answer 1 · answered Apr 23 '16 at 23:55

Per the limitTo docs there are arguments for start and limit

{{ limitTo_expression | limitTo : limit : begin}}

So you can use scope variables for those arguments as per this simple example:

<p ng-repeat="item in items|limitTo:limit:start">{{item.name}}</p>
<button ng-click="next()" ng-if="start < items.length-10">Next</button>
<button ng-click="prev()" ng-if="start >0">Prev</button>

JS

  $scope.start = 0;
  $scope.limit = 10;
  $scope.items = [/* some data*/];      

  $scope.next = function() {
    incrementLimit(true)
  }
  $scope.prev = function() {
    incrementLimit(false)
  }

  function incrementLimit(up) {
    if (up) {
      ($scope.start <= ($scope.items.length - $scope.limit)) ? $scope.start += 10: $scope.start = 0;
    } else {
      $scope.start > 10 ? $scope.start -= 10 : $scope.start = 0;

    }
  }

DEMO

score 0 · Answer 2 · answered Apr 23 '16 at 23:54

0

The limitTo filter has an optional start parameter.

Set a variable e.g. $scope.start = 0

You can then setup your filter as limitTo : 10 : start and when you click the button just increment $scope.start by 10.

angularjs limitTo documentation

answered Apr 23 '16 at 23:54

cnorthfield

3,384
15
22

score 0 · Answer 3 · answered Apr 24 '16 at 05:37

According to documentation, it is automatic if u use this-

{{ limitTo_expression | limitTo : limit : begin}}

U can try this example-

var todos = angular.module('todos', ['ui.bootstrap']);

todos.controller('TodoController', function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;
  
  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:'todo '+i, done:false});
    }
  };
  $scope.makeTodos(); 
  
  $scope.numPages = function () {
    return Math.ceil($scope.todos.length / $scope.numPerPage);
  };
  
  $scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;
    
    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />

<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>

<script data-require="angular-ui-bootstrap@0.3.0" data-semver="0.3.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>


<h1>Todos</h1>
<h4>{{todos.length}} remain</h4>

<ul>
  <li ng-repeat="todo in filteredTodos">{{todo.text}}</li>
</ul>
<div data-pagination="" data-num-pages="numPages()" 
  data-current-page="currentPage" data-max-size="maxSize"  
  data-boundary-links="true">
</div>

Runnable code can be found here-

http://plnkr.co/edit/ItgGWIq5ZhzgBYmWJ68y?p=preview

AngularJS limitTo filter

3 Answers3