One of the basic building blocks of Angular is, of course, the
It’s certainly one of the things newcomers pick up right when starting to learn Angular.
Yet, it’s very easy to just learn the basics and miss out on some of its lesser known but useful features.
In this post you will learn what automatic properties
ng-repeat creates on the scope object, to make common tasks easier.
The scope property is most probably the most popular one.
ng-repeat, every block of repeated content has access to a property called
This property is a number, and contains the current index of the “loop”
ng-repeat is doing:
1 2 3
As you can probably guess, this will display next to each task’s name its index in the
Yet while it is most known, it is probably the one that should be used the least.
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.
I’ve seen too many programmers do it awkwardly using
ng-repeat already supplies you with two ready boolean properties.
true for the first element, and
true for the last element.
While we’re at it, I’ll mention that if all you’re doing here is styling, e.g.
ng-class according to the first/last index, you might be better off doing this purely in CSS using the
This simple property is simply used to tell whether the current element is neither the first element in the loop, nor the first.
It’s equivalent to
!$first && !$last (to please the logic nerds, this is also
!($first || $last), according to De Morgan’s Laws).
These properties simply state whether the current
$index is odd or even.
It’s very common to style grid with alternating colors between rows for easier readability, and if you’re using
ng-class to add an
.even class, you’d better use
$even instead of
$index % 2 == 0.
Yet, again, I’ll say that in case you’re using this solely for styling, doing this in CSS would probably be the better choice, e.g.
You can read more about these properties and
ng-repeat’s other features in the documentation.
“Maintaining AngularJS feels like Cobol 🤷…”
You want to do AngularJS the right way.
Yet every blog post you see makes it look like your codebase is obsolete. Components? Lifecycle hooks? Controllers are dead?
It would be great to work on a modern codebase again, but who has weeks for a rewrite?
Well, you can get your app back in shape, without pushing back all your deadlines! Imagine, upgrading smoothly along your regular tasks, no longer deep in legacy.
Subscribe and get my free email course with steps for upgrading your AngularJS app to the latest 1.6 safely and without a rewrite.