Previous Tutorial
25
apr.Understanding ng-repeat special variables
29 dec. 2023
Intermediate
20,8K Views
2 min read
The ng-repeat directive has a set of special variables which you are useful while iterating the collection. These variables are as follows:
$index
$first
$middle
$last
The $index contains the index of the element being iterated. The $first, $middle and $last returns a boolean value depending on whether the current item is the first, middle or last element in the collection being iterated.
<html>
<head>
<title></title>
<script src="lib/angular.js"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
$scope.friends = [{ name: 'shailendra', gender: 'boy' },
{ name: 'kiran', gender: 'girl' },
{ name: 'deepak', gender: 'boy' },
{ name: 'pooja', gender: 'girl' }];
});
</script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<ul class="example-animate-container">
<li ng-repeat="friend in friends">
<div>
[{{$index + 1}}] {{friend.name}} is a {{friend.gender}}.
<span ng-if="$first">
<strong>(first element found)</strong>
</span>
<span ng-if="$middle">
<strong>(middle element found)</strong>
</span>
<span ng-if="$last">
<strong>(last element found)</strong>
</span>
</div>
</li>
</ul>
</div>
</body>
</html>
How it works..
What do you think?
I hope you have enjoyed the ng-repeat directives a special variable in AngularJS while using ng-repeat while developing your app with AngularJS. I would like to have your feedback for this artcle from your side. Your valuable feedback, question, or comments about this article are always welcome.
Even though before Anguar2 revulution, I have curated various angular js online training video based learning materials with hands-on coding with real-time implemention in a step by step angularJs training program. on the demand from angular js training in Hyderabad audience, I made freely available at Dot Net Tricks & youtube. Hope you will refer Angularjs training videos. For a structured and in-depth understanding of AngularJS concepts, consider exploring an Angular Certification program.
Thank you so much!
Take our free skill tests to evaluate your skill!
In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.
