2014-11-08 7 views
7

Ich habe eine Liste, die die Namen, die ich gewählt habe, protokolliert, wie unten gezeigt. Was ich will, ist, dass die Liste immer nur die letzten 5 Ergebnisse zeigt, aber was ich im Moment habe, zeigt die ersten 5 in der Reihenfolge der Zeit mit den neuesten zuerst. Wie kann dies erreicht werden?angularjs Zeige die letzten 5 Einträge in ng-repeat list

http://jsfiddle.net/sfqo2fn3/1/

<div ng-controller="MyCtrl"> 
     <input type="text" ng-model="updatedname" /> 
     <input type="button" value="Change name" ng-click="changeName(updatedname)"/> 
     <br/> 
      Hello, {{name}}! 
    <ul> 
     <li ng-repeat="name in nameLog | limitTo:5 | orderBy:'time':true">{{name.value}} - {{name.time}}</li> 
    </ul>  
    </div> 

    var myApp = angular.module('myApp',[]); 
    myApp.factory('UserService', function() { 
       var _nameLog = []; 
       var userService = {}; 
       userService.name = "John"; 
       userService.ChangeName = function (value) { 
        userService.name = value; 
       }; 
       userService.logName = function (value) { 
        _nameLog.push ({ 
         "value":value, 
         "time" :Date.now() 
        }); 
       }; 
       userService.getNameLog = function(){ return _nameLog; } 
     return userService; 
    }); 

    function MyCtrl($scope, UserService) { 
     $scope.name = UserService.name; 
     $scope.updatedname=""; 
     $scope.changeName=function(data){ 
      $scope.updateServiceName(data); 
     } 
     $scope.updateServiceName = function(name){ 
      UserService.ChangeName(name); 
      UserService.logName(name); 
      $scope.name = UserService.name; 
      $scope.nameLog = UserService.getNameLog(); 
     } 
    } 

Antwort

34

Sie tun können: | limitTo: -5

<li ng-repeat="name in nameLog | limitTo:-5 | orderBy:'time':true">...</li> 

Von documentation:

Grenze: Die Länge des zurückgegebenen Arrays oder Strings. Wenn die Grenzwertnummer positiv ist, wird die Anzahl der Elemente vom Anfang des Quellenarrays/der Zeichenfolge kopiert. Wenn die Anzahl negativ ist, wird die Anzahl der Elemente vom Ende des Quell-Arrays/Strings kopiert. Das Limit wird getrimmt, wenn es array überschreitet. Length

2

Sie können einen benutzerdefinierten Filter dafür erstellen. Ich habe Ihre Geige ein wenig geändert:

http://jsfiddle.net/sfqo2fn3/2/

myApp.filter('slice', function() { 
    return function(arr, start, end) { 
     if(!end) { 
      return (arr || []).slice(start); 
     } 
     return (arr || []).slice(start, end); 
    }; 
}); 

Sie jetzt einen „Scheibe“ Filter haben, die nur zeigen die letzten 5 Elemente im Array filtern.

Verwandte Themen