Add a class to last 3 list items in AngularJS - angularjs

Question

I have a list that is generated via ng-repeat. E.g i have the html like this
<ul class="my-list">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
I want to add a class of .last-itmes to the last 3 list items using angular. How can i do this?

Answer 1

In ng-repeat, Angular provides $index, $first, $last to get the index position of list item.
In your case you can use $last and substract from it like $last-1, $last-2.
Sample code :
<li ng-repeat="item in itemList"
ng-class="{'last':($index === $last) || ($index === ($last-1)) || ($index === ($last-2))}"
>List Item
</li>

Answer 2

Please see demo below
ie:
ng-class="{'last-itmes':$index>=data.length-3}"
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
$scope.data = [1, 2, 3, 4, 5, 6, 7, 8, 9]
});
.last-itmes {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<ul class="my-list">
<li ng-repeat="i in data" ng-class="{'last-itmes':$index>=data.length-3}">{{i}}</li>
</ul>
</div>
</div>

Answer 3

My suggestion is that you can go for Directives which is a neat and clean way
var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
$scope.datas = ['List Item',
'List Item',
'List Item',
'List Item',
'List Item',
'List Item',
'List Item',
'List Item'];
})
.directive("itemWatch", [function () {
return {
scope: {
index: '=index',
length: '=length'
},
replace: false,
link: function ($scope, $element, $attrs, Controller) {
if ($scope.length - $scope.index <= 3) {
$element.addClass('last-itmes');
}
}
};
}]);
.last-itmes
{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="ArrayController">
<ul class="my-list">
<li ng-repeat="item in datas track by $index" index="$index" length="datas.length" item-watch>{{item}}</li>
</ul>
</div>

Answer 4

You can use with js object and ng-show.
var items = [
{id:1,isLast:false}
{id:2,isLast:true}
{id:3,isLast:true}
]
And your html with angularjs:
<li ng-repeat="item in items">
<div class="last-items" ng-show="item.isLast">
</li>

Answer 5

When setting up your ng-repeat, you can use track by $index to determine which position you are on. Doing that, you can easily do things within the repeat. To get it to add a class for just the last three items, you can put a condition on the ng-class directive like so:
<table>
<tbody ng-repeat="row in people track by $index">
<tr ng-class="{'blue': $index > people.length - 4 }">
<td>
<p style="font-weight:bold;">{{ row }}</p>
</td>
</tr>
<tbody>
</table>
I've made a plunker to show an example:
http://plnkr.co/edit/g24eYggfIRFS2El8R5Mu