2016-07-15 12 views
0

Ich habe Artikel-Array, das in der Anwendung ändert. Beim Löschen von Elementen limitTo trimmt automatisch den Grenzwert, aber wenn ich Elemente hinzufüge, gibt es den ursprünglichen Grenzwert nicht zurück. Like as limit = 5 und items.length wird 2 limitTo Wert wird 3 und wächst nie wieder auf 5 wenn items.length zunimmt. Uplating Limit funktioniert nicht.ng-repeat limitTo begrenzt automatisch und gibt es nicht zurück

JS: 
    $scope.filterLimit = 5; 
    $scope.itemList2 = ['item1', 'item2', 'item3', 'item4'] 

HTML: 

<div ng-repeat="i in itemList2 | limitTo: filterLimit"> 
    <h5>{{i}}</h5> 
</div> 
<button ng-click="itemList2.push('new item')"> Add </button><br> 
<button ng-click="itemList2.length = itemList2.length-1"> Delete </button><br> 
<button ng-click="filterLimit = filterLimit+1"> Update </button> 
+0

Bitte überprüfen Sie meine Antwort. – developer033

Antwort

0

Nun, das ist das Hauptproblem, dass Sie das gleiche Element sind das Hinzufügen zur Liste, so ngRepeat Behauptungen über die folgenden Fehler geben: ngRepeat:dupes.

<div ng-repeat="i in itemList2 | limitTo: filterLimit track by $index"> 

Hinweis: Filter, wie limitTo, orderBy, etc ... muss vor track by Ausdruck

es zu lösen, müssen Sie track by Ausdruck in Ihrem ngRepeat, wie diese verwendet werden.

Auch ich empfehle Ihnen, functions von controller für ng-click() statt alles in Sicht zu verwenden.

Hier ist eine Version mit allen behobene Fehler:

angular.module('app', []) 
 
    .controller('mainCtrl', function($scope) { 
 
    $scope.filterLimit = 5; 
 
    $scope.itemList2 = ['item1', 'item2', 'item3', 'item4']; 
 

 
    $scope.add = function() { 
 
     $scope.itemList2.push('item'); 
 
    } 
 

 
    $scope.delete = function() { 
 
     $scope.itemList2.pop(); 
 
    } 
 

 
    $scope.increment_filter = function() { 
 
     $scope.filterLimit++; 
 
    } 
 
    });
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <div ng-repeat="i in itemList2 | limitTo: filterLimit"> 
 
    <h5 ng-bind="i"></h5> 
 
    </div> 
 
    <button ng-click="add()"> Add </button> 
 
    <br> 
 
    <button ng-click="delete()"> Delete </button> 
 
    <br> 
 
    <button ng-click="increment_filter()"> Update </button> 
 

 
    <hr> 
 
    List: <pre ng-bind="itemList2"></pre> 
 
    Limit: <pre ng-bind="filterLimit"></pre> 
 
</body> 
 

 
</html>