Hit enter after type your search item

6 examples to explain Angular ng-repeat directive

The ng-repeat directive in AngularJS

As the directive name suggests, the ng-repeat instantiates a set of HTML or template for each item in the given collection.

li Example ng-repeat table demo

The collection can be an array or object.

FYI, a template in AngularJS is referred to the HTML with angular-specific elements and attributes (directives etc.).

Arrays Example

Syntax of using the ng-repeat directive

Following is the general syntax of using the ng-repeat directive:

  • Using as an attribute

<div

ng-repeat=”repeat_expression”>

Lines or codes to be executed here

</div>

Where, the div can be replaced by any elements like h1 to h6 headings, span, paragraph tags etc.

  • You may also use it as an element

<ng-repeat

ng-repeat=”expression”>

</ng-repeat>

The repeat expression in the syntax can be used in different ways, for example:

i in Arr_collection

OR

(key, value) in obj_collection

See the following examples for learning more about the ng-repeat angular directive.

A demo of ng-repeat with li tag

In this demo, the ng-repeat directive is used in the <li> tag of HTML. A collection of student names is created in the controller part of Angular. In the list tag, the ng-repeat is used for displaying the student names. Have a look:

ng-repeat

See online demo and code

The code:

A demo of using ng-repeat in HTML table

In this example of using the ng-repeat directive, the HTML table is created where collection items are used:

angular ng-repeat

See online demo and code

The code:


 

A demo of using key/value pairs in ng-repeat

In this example, a collection is created with key/value pairs for employee names and their respective salaries. In the <tr> tag of the HTML table, the ng-repeat is used with key/value pairs. The key and values are used in the tr tag that will repeat until the last item:

ng-repeat key value

See online demo and code

The code:

What happens if a collection contains duplicate items?

By default, the tracking function in Angular does not allow duplicate entries in arrays.  The reason is to maintain one to one mapping between DOM elements and collection items. See this example, where an array with duplicate entries is created.

var nums = [5,10, 15, 10, 4,20,30, 40];

The array items are “displayed” by using the ng-repeat directive in the HTML table. Have a look at the output:

ng-repeat duplicates

See online demo and code

The code:


You see, no array items are displayed. Now see the next example for displaying the array with duplicate entries.

Displaying the array with duplicate entries demo

In certain scenarios, you may need to work with duplicate entries in arrays. In that case, you may use the track by expression and substitute the tracking behavior. Have a look at this demo where I just added the special scope property ($index) in above example with track by an expression:

ng-repeat trrack-by

See online demo and code

In the table,  you can see all the elements of the array with duplicate values and index numbers.

A demo of using orderBy in ng-repeat directive

You may arrange the array items based on keys by using the orderBy filter. In this example, the orderBy filter is used in the second example where products are arranged. The array items order at the time of declaration: Sugar, Wheat, and Rice. Have a look at the output after using the orderBy with ng-repeat directive:

ng-repeat orderby

See online demo and code

This line is used in<tr> tag:

<tr ng-repeat=”prod in products | orderBy: ‘product'”>

Get the complete code from the demo page.

This div height required for enabling the sticky sidebar