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();
}
}
$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.
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.
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.
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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With