Filtre os resultados de 6 a 10 de 100 com ng-repeat em AngularJS

Eu vejo o limitTo filtrar nos documentos, o que me permite limitar os primeiros 5 ou últimos 5 resultados, mas eu quero definir onde meu limite começa para que eu possa mostrar o segundo conjunto de 5 resultados.

Existe um filtro embutido para isso?

Desde o Angular 1.4.0, o filtro limitTo tem um argumento begin opcional:

 
{{item}}

Em versões mais antigas, escrever um filtro personalizado é bastante simples. Aqui está uma implementação ingênua baseada na Array#slice (note que você passa o primeiro e último índice, ao invés de uma contagem):

 app.filter('slice', function() { return function(arr, start, end) { return (arr || []).slice(start, end); }; }); 
 
{{item}}

Trabalhando jsFiddle: http://jsfiddle.net/BinaryMuse/vQUsS/

Alternativamente, você pode simplesmente roubar toda a implementação do Angular 1.4.0 de 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); } } }; } 

O AngularJS fornece essa funcionalidade já pronta para uso. Se você ler atentamente a documentação do limitTo, você poderá especificar um valor negativo para o limite. Isso significa N elementos no final, portanto, se você quiser processar 5 resultados após um deslocamento de 5, será necessário fazer o seguinte:

{{item}}

Eu comecei a brincar com os filtros do cliente, mas descobri que você pode simplesmente chamar o slice dentro da expressão ng-repeat :

 
{{item}}

Como o bluescreen disse, isso pode ser feito usando apenas o filtro limitTo , embora lidar com o problema da última página notado por Harry Oosterveen precise de algum trabalho extra.

Ou seja, usando as propriedades da diretiva de pagination ui-bootstrap :

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

A expressão deve ser:

 
{{item}}

Aqui está um exemplo funcional de como filtrar uma lista com deslocamento e limite:

        Offset: 
Limit:

offset limitTo: {{offset - phones.length}}

Partial list:

  • {{$index}} - {{phone.name}} - {{phone.snippet}}

Whole list:

  • {{$index}} - {{phone.name}} - {{phone.snippet}}

O exemplo é baseado na segunda etapa do tutorial do AngularJS .

Note que o filtro para o offset tem que ser colocado como o primeiro filtro se você quiser cobrir o caso genérico onde o limite não é conhecido.

da resposta do bluescreen:

 
{{item}}

Você também pode encontrar um cenário onde você precisa levar o item N-th até o último item , esta é outra maneira de usar limitTo:

 

Há uma maneira mais fácil de fazer isso sem precisar invocar um filtro e se comportará mais como um paginador:

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

E apenas coloque isso na sua opinião:

 
  • {{item}}

Então você pode apenas incrementar / decrementar $scope.page :

 $scope.page++; 

Você também pode criar seu próprio filtro reutilizável startFrom como assim:

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

e depois usá-lo no seu ng-repeat assim:

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

Dessa forma, é feito “em um espírito de filtros AngularJs”, testável, pode ter alguma lógica “extra”, se necessário, etc.

@ ans do bluescreen e ans do @Brandon não são equivalentes.

por exemplo:

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

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

produzir [2, 3, 4]

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

produzir [4]

Para projetos baseados em Ionic, encontre a solução abaixo:

mainpage.html:

     {{track.title}}   

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