Ich versuche, eine Paginierung Richtlinie mit AngularJS zu bauen 1.2.15:
Das ist meine Ansicht:
<input type="text" ng-model="filter.user">
<input type="number" ng-model="filter.limit" ng-init="filter.limit=5">
<ul>
<li ng-repeat="user in (filteredUsers = (users | orderBy:order:reverse | filter:filter.user) | limitTo: filter.limit)" ng-click="showDetails(user)">
{{user.id}}/{{user.firstname}} {{user.lastname}}
</li>
</ul>
<div pagination data='filteredUsers' limit='filter.limit'></div>
und hier ist meine Paginierung Richtlinie:
app.directive('pagination', function(){
return {
restrict: 'A',
templateUrl: 'partials/pagination.html',
scope: {
data: '=data',
limit: '=limit'
}
}
})
Alles funktioniert einwandfrei ohne die Paginierung Anweisung. Jedoch mit meiner neuen Direktive, sobald ich die Seite lade, bekomme ich einen $rootScope:infdig
Fehler, den ich nicht verstehe, da die Direktive nichts tut, um Daten zu manipulieren, die in einer Endlosschleife landen könnten.
Was ist das Problem hier und wie kann ich es lösen? Vielen Dank!
Aktualisierung:
Hier sind der Controller und die Ressource.
Controller:
usersModule.controller('usersController',
function ($scope, Users) {
function init(){
$scope.users = Users.get();
}
init();
})
Ressource (bekommt Benutzer als ein Array aus einer REST API):
app.factory('Users', function($resource) {
return $resource('http://myrestapi.tld/users', null,{
'get': { method:'GET', isArray: true, cache: true }
});
});
Update 2
Hier ist eine Demo: http://plnkr.co/edit/9GCE3Kzf21a7l10GFPmy?p=preview
Geben Sie einfach ein Buchstabe (zB "f") in den linken Eingang.
Bitte geben Sie den Code für den Controller an, damit die Leute das Problem lösen können. Ich denke obige Richtlinie ist perfekt. Es kann Probleme mit Ihrem Controller geben. –
einfache Client-Seite Paginierung - http://angulartutorial.blogspot.in/2014/03/client-side-pagination-using-angular-js.html – Prashobh
@JenishRabadiya Ich habe den obigen Code aktualisiert. Allerdings glaube ich nicht, dass es etwas mit meinem Controller zu tun hat ... – Horen