Working with ng-repeat (PART 1)

6 Sep by vichu

Working with ng-repeat (PART 1)

Reading Time: 3 minutes

The ng-repeat directive is one of the most versatile directives in AngularJS, and can be used for a whole variety of situations and requirements. We saw how we can use it to repeat an array in the previous examples. In this section, we will explore some of the other options we have when using the ng-repeat directive. I like to give this as simple as possible, so I will take two posts for this.

ng-repeat Over an Object

Just like we used the ng-repeat directive to show an array of elements in the HTML, we can also use it to show all the keys and values of an object:

See the Pen ng-repeat by Vishal Srinivasan (@vishal_srini) on CodePen.0

In this example, we have intentionally capitalized Misko while leaving brad and shyam lowercase. When we use the ng-repeat directive over an object instead of an array, the keys of the object will be sorted in a case-sensitive, alphabetic order. That is, uppercase first, and then sorted by alphabet. So in this case, the items would be shown in the HTML in the following order: Misko, brad, shyam.

The ng-repeat directive takes an argument in the form variable in arrayExpression or (key, value) in objectExpression. When used with an array, the items will be in the order in which they exist in the array.



Helper Variables in ng-repeat

The ng-repeat directive also exposes some variables within the context of the HTML template that gets repeated, which allows us to gain some insight into the current element:

See the Pen ng-repeat with fetching each element by Vishal Srinivasan (@vishal_srini) on CodePen.0

In this example, we use the same array that we did in the example with the ng-repeat over the array of items. The only difference is that we now display more state about the item being repeated in the HTML. For each item, we display which index the item is in, and whether it is the first, middle, last, odd, or even item. Each of the $ prefixed variables we use within the context of the ng-repeat are provided by AngularJS, and refer to the state of the repeater for that particular element. They include:

  • $first, $middle, and $last are Boolean values that tell us whether that particular element is the first, between the first and last, or the last element in the array or object.
  • $index gives us the index or position of the item in the array.
  • $odd and $even tell us if the item is in an index that is odd or even (we could use this for conditional styling of elements, or other conditions we might have in our application).

Do note that in the case of an ng-repeat over an object, all of these list items exist and are still applicable, but the index of the item may or may not correspond to the order in which we declare the keys in the object. This is because of the way AngularJS ngrepeat sorts the keys of the object alphabetically, as we saw in the “ng-repeat Over an Object” in the beginning.

Byvichu

Love to code and Love to learn. A passionate technology lover who likes to sit with laptop even for weeks :D

Leave a Reply

Your email address will not be published. Required fields are marked *