AngularJS limitTo filter

Question

Я понимаю, что в AngularJS для ограничения данных используется фильтр под названием «limitTo».

Допустим, что у нас есть 100 записей, и мы ограничиваем данные 10 записями, используя фильтр limit.

Теперь, как я могу отобразить оставшиеся 90 записей. Мне нужна следующая и предыдущая кнопка внизу, которая должна показывать мне следующие 10 записей, когда я нажимаю на нее и так далее.

Как я могу достичь этого без ущерба для производительности. Пожалуйста, предоставьте код, если сможете. Спасибо ... :-)

Answer 1

Фильтр limitTo имеет необязательный параметр запуска.

Установите переменную, например. $scope.start = 0

Вы можете настроить ваш фильтр в качестве limitTo : 10 : start и при нажатии на кнопку просто увеличиваем $scope.start на 10.

angularjs limitTo documentation

Answer 2

согласно limitTo docs есть аргументы для start и limit

{{ limitTo_expression | limitTo : limit : begin}} 

Итак, вы можете использовать переменные области видимости для этих аргументов в соответствии с этим простым примером:

<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

Answer 3

Согласно documentation, это происходит автоматически, если и использовать this-

{{ limitTo_expression | limitTo : limit : begin}} 

U можете попробовать этот examp le-

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 код можно найти здесь-

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