DoCow
  1. DoCow
  3. Filtre os resultados de 6 a 10 de 100 com ng-repeat em AngularJS

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