Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angularjs show last 5 items in ng-repeat list

I have a list which logs previous names that I have chosen as shown below. What I want is for the list to always only show the last 5 results, however what I have at the moment is showing the first 5 in order of time with latest first. How can this be achieved?

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();
        }
    }
like image 942
ak85 Avatar asked Nov 08 '14 01:11

ak85


People also ask

Where is the last element in NG-repeat?

$first and $last It's common when using ng-repeat to add specific behavior to the first or last element of the loop, e.g. special styling around the edges. Instead, ng-repeat already supplies you with two ready boolean properties. $first is true for the first element, and $last is true for the last element.

How do I get the index of an element in NG-repeat?

Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.

How do I use track in NG-repeat?

Track by $index in AngularJSThe ngRepeat track by $index allows you to specify which items should be repeated using their index number. The ngRepeat is a directive that can be added to the HTML template of an Angular application. It is used for creating lists, and it can take an expression as an argument.

What can I use instead of NG-repeat?

And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.


2 Answers

You can do: | limitTo: -5

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

From documentation:

limit: The length of the returned array or string. If the limit number is positive, limit number of items from the beginning of the source array/string are copied. If the number is negative, limit number of items from the end of the source array/string are copied. The limit will be trimmed if it exceeds array.length

like image 140
New Dev Avatar answered Sep 27 '22 23:09

New Dev


You can create a custom filter for this. I have modified your fiddle a little bit:

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);
    };
});

You now have a "slice" filter that will filter to only show the last 5 items in the array.

like image 41
wjohnsto Avatar answered Sep 28 '22 01:09

wjohnsto