Vedo il filtro limitTo nei documenti, che mi consente di limitare i primi 5 o gli ultimi 5 risultati, ma voglio impostare dove inizia il mio limite in modo da può mostrare la seconda serie di 5 risultati.Filtra i risultati da 6 a 10 di 100 con ng-repeat in AngularJS
C'è un filtro integrato per questo?
Dal 1.4.0 angolare, il limitTo filter prende un argomento opzionale begin:
<div ng-repeat="item in items | limitTo:5:5">{{item}}</div>
Nelle versioni più vecchie, la scrittura di un filtro personalizzato è abbastanza semplice. Ecco un'implementazione ingenuo sulla base di Array#slice (nota si passa il primo e l'ultimo indice, invece di un conteggio):
app.filter('slice', function() {
return function(arr, start, end) {
return (arr || []).slice(start, end);
};
});
<div ng-repeat="item in items | slice:6:10">{{item}}</div>
lavoro jsFiddle: http://jsfiddle.net/BinaryMuse/vQUsS/
In alternativa, si può semplicemente rubare the entire Angular 1.4.0 implementation of 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);
}
}
};
}
AngularJS fornisce questa funzionalità già pronta per l'uso. Se si legge attentamente la documentazione limitTo, è possibile specificare un valore negativo per il limite. Ciò significa che gli elementi N alla fine, quindi se si desidera elaborare 5 risultati dopo un offset di 5 è necessario effettuare le seguenti operazioni:
<div ng-repeat="item in items | limitTo: 10 | limitTo: -5">{{item}}</div>
Questa soluzione risponde alla domanda posta a un tee. Ma attenzione, questo funziona solo per il secondo set di risultati. Non funzionerà per il 1 °, 3 °, 4 ° set o altri. (Il primo limite Per creare un array con i primi 10 elementi dell'origine, il secondo limite può quindi funzionare solo all'interno di tali risultati.) – Tyler
Questo errore potrebbe essere errato nell'ultima pagina. Supponiamo che ci siano 7 articoli, la prima pagina mostra l'elemento 1-5, la seconda pagina dovrebbe mostrare gli articoli 6 e 7, ma qui mostrerà l'articolo 3-7. –
'La lunghezza dell'array o della stringa restituita. Se il numero limite è positivo, vengono copiati il numero limite di elementi dall'inizio della matrice/stringa sorgente. Se il numero è negativo, vengono copiati il numero limite di elementi dalla fine dell'array/della stringa di origine. Il limite verrà tagliato se supera array.length' Non penso che questa risposta sia giusta. – connorbode
Ecco un esempio funzionale su come filtrare un elenco con offset e limite :
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
Offset: <input type="text" ng-model="offset" value="0" /><br />
Limit: <input type="text" ng-model="limit" value="10" /><br />
<p>offset limitTo: {{offset - phones.length}}</p>
<p>Partial list:</p>
<ul>
<li ng-repeat="phone in phones | limitTo: offset - phones.length | limitTo: limit">
{{$index}} - {{phone.name}} - {{phone.snippet}}
</li>
</ul>
<hr>
<p>Whole list:</p>
<ul>
<li ng-repeat="phone in phones">
{{$index}} - {{phone.name}} - {{phone.snippet}}
</li>
</ul>
</body>
</html>
L'esempio è basato su second step of AngularJS tutorial.
Si noti che il filtro per l'offset deve essere inserito come primo filtro se si desidera coprire il caso generico in cui il limite è noto.
Come ha detto schermo blu, può essere fatto utilizzando solo il filtro limitTo, anche se trattare con il ultima pagina problema notato da Harry Oosterveen ha bisogno di qualche lavoro extra.
I.e.utilizzando ui-bootstrap proprietàpagination direttiva:
ng-model = page // current page
items-per-page = rpp // records per page
total-items = count // total number of records
L'espressione dovrebbe essere:
<div ng-repeat="item in items | limitTo: rpp * page | limitTo: rpp * page < count ? -rpp : rpp - (rpp * page - count)">{{item}}</div>
+1 Ha funzionato come un fascino, ha adorato il modo in cui ha funzionato. Grazie. – code90
C'è un modo più ordinato di farlo senza dover invocare un filtro e si comporterà più come un Paginator:
$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 solo bastone che a vostro parere:
<ul>
<li ng-repeat="item in itemsPaginated() | limitTo:itemsLimit">{{item}}</li>
</ul>
Poi si può solo aumentare/diminuire $scope.page:
$scope.page++;
ho iniziato a giocare con i filtri dei clienti, ma poi scoperto che si può chiamare slice all'interno del ng-repeat espressione:
<div ng-repeat="item in items.slice(6, 10)">{{item}}</div>
da bluescreen risposta:
<div ng-repeat="item in items | limitTo: 10 | limitTo: -5">{{item}}</div>
si potrebbe anche trovare uno scenario in cui è necessario prendere N-esimo punto fino all'ultimo elemento, questo è un altro modo con limitTo:
<div ng-repeat="item in items | limitTo:-(items.length-5)>{{item}}</div>
segno negativo avrà tanto quanto items.length da ultimo, quindi meno 5 all'interno della parentesi salteranno i primi 5 elementi
@ bluescreen's ans e @ Brandon's ans non sono equivalenti.
ad esempio:
var pageSize = 3;
var page = 2;
var items = [1, 2, 3, 4];
-
item in items | limitTo: page*pageSize | limitTo: -1*pageSize
prodotti [2, 3, 4]
item in items | slice: (page-1)*pageSize : page*pageSize
prodotti [4]
è anche possibile creare il tuo filtro riutilizzabile inizia così:
myApp.filter('startFrom', function() {
return function (input, start) {
start = +start;
return input.slice(start);
}
});
e poi utilizzarlo nella vostra ng-ripetere in questo modo:
ng-repeat="item in items | startFrom: 5 | limitTo:5
In questo modo si è fatto "in uno spirito di filtri AngularJs", verificabile, può avere una logica "extra" se necessario, ecc
Per i progetti basati ionico trovare la soluzione qui di seguito:
mainpage.html:
<ion-view view-title="My Music">
<ion-content>
<ion-list>
<ion-item ng-repeat="track in tracks | limitTo: limit | limitTo: -10 ">
{{track.title}}
</ion-item>
</ion-list>
<div class="list"></div>
<div align="center">
<button class="button button-small button-positive" ng-disabled="currentPage == 0" ng-click="decrementLimit()">
Back
</button>
<button class="button button-small button-energized">
{{currentPage+1}}/{{numberOfPages()}}
</button>
<button class="button button-small button-positive" ng-disabled="currentPage >= data_length/pageSize - 1" ng-click="incrementLimit()">
Next
</button>
</div>
</ion-content>
</ion-view>
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
}
});
@ risposta bluescreen qui sotto (con 20 voti in su) è la risposta corretta qui. Si prega di scegliere quello. – RavenHursT
continuava a darmi errori su arr essendo indefinito così ho fatto questo arr = arr || []; return arr.slice (start, end); –
Non riesco a farcela con la notazione 'ControllerAs': http://jsfiddle.net/r9kvaydh/3/ –