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.
You want to do Angular the right way.
You hate spending time working on a project, only to find it’s completely wrong a month later.
But, as you try to get things right, you end up staring at the blinking cursor in your IDE, not sure what to type.
Every line of code you write means making decisions, and it’s paralyzing.
You look at blog posts, tutorials, videos, but each is a bit different.
Now you need to reverse engineer every advice to see what version of Angular it was written for, how updated it is, and whether it fits the current way of doing things.
What if you knew the Angular Way of doing things?
Imagine knocking down your tasks and spending your brain cycles on your product’s core.
Wouldn’t it be nice to know Angular like a second language?
You can write modern, clean and future-ready Angular right now.
Sign up below and get more of these helpful posts, free!
Always up to date and I’ve already done all the research for you.
And be the first the hear about my Modern Angular 1.x book – writing future proof Angular right now.