Javascript angularjs 显示 ng-repeat 列表中的最后 5 个项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26812833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angularjs show last 5 items in ng-repeat list
提问by ak85
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?
我有一个列表，其中记录了我选择的以前的名称，如下所示。我想要的是列表始终只显示最后 5 个结果，但是我目前所拥有的是按时间顺序显示前 5 个，最后显示在前。如何做到这一点？
http://jsfiddle.net/sfqo2fn3/1/
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();
}
}
回答by New Dev
You can do: | limitTo: -5
你可以做： | 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
limit：返回的数组或字符串的长度。如果限制数为正数，则复制源数组/字符串开头的限制项数。如果数字为负数，则复制源数组/字符串末尾的限制项数。如果超过 array.length，则限制将被修剪
回答by wjohnsto
You can create a custom filter for this. I have modified your fiddle a little bit:
您可以为此创建自定义过滤器。我稍微修改了你的小提琴：
http://jsfiddle.net/sfqo2fn3/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);
};
});
You now have a "slice" filter that will filter to only show the last 5 items in the array.
您现在有一个“切片”过滤器，它将过滤以仅显示数组中的最后 5 个项目。
