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:
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 } });
- Como posso ocultar um elemento quando a página é rolada?
- Como usar um evento keypress no AngularJS?
- Angular – Não é possível fazer o pedido de repetição da repetiçãoPor trabalho
- Qual é o significado de require: ‘ngModel’?
- Como obtenho o botão Voltar para trabalhar com uma máquina de estado de roteador ui AngularJS?
- Como executar a function do controlador AngularJS no carregamento da página?
- Dois conjuntos de parênteses após a chamada de function
- Angular $ http está enviando OPÇÕES em vez de PUT / POST