Question

我有一个列表，记录我选择的先前名称，如下所示。我想要的是列表总是只显示最后5个结果，但是我现在所拥有的是以最新的第一个按顺序显示前5个。如何实现这一目标？

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

Answer 1

你可以这样做：| limitTo: -5

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

来自documentation：

limit：返回的数组或字符串的长度。如果限制数为正，则复制源数组/字符串开头的限制项数。如果数字为负数，则复制源数组/字符串末尾的限制项数。如果限制超过array.length
，则将限制该限制

Answer 2

您可以为此创建自定义过滤器。我稍微修改了你的小提琴：

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

您现在有一个“切片”过滤器，它将过滤以仅显示数组中的最后5个项目。

angularjs显示ng-repeat列表中的最后5项

2 个答案: