Angularjs ng-repeat Directive

Saturday, February 13th, 2016 (0 Comment)

1. What is angularjs ng-repeat directive?

Angularjs ng-repeat Directive will repeat a certain HTML block, where we declare repeat. Each block (items) so there will be a separate $scope at each iteration. At each iteration, we can see a few things are repeating elements. Is there the first part beginning, middle and end? Is there the odd elements and even elements?

AngularJs will repeat object or array, and each iteration will be an element of the array. As you know we can create array in JavaScript by syntax [] and inside is a list of the array elements. As for the object, we use the brackets {}.

Example 1: create a String Array include item 1 to item 5 and display items.

Demo

  • Line 12 – 14: using angularjs ng-repeat to get list item in String Array
  • Line 20: Declare String Array items

Output:

Example 2: extend from example 1, create an Object and display properties of object (people object include name, age and room)

Demo

  • Line 12: ng-repeat=”(key, value) in people”, declare key is property of people object and value is value of people object.
  • Line 21 – 25: Declare a people Object

Output:

Example 3: extend from example 2, create list people object and display information of each people.

Demo

  • Line 12 – 16: using object orient programming.
  • Line 23 – 25: Declare list people object by using javascript (the same json)

Output:

2. Angularjs ng-repeat-start and Angularjs ng-repeat-end

Instead of using a loop as above, then AngularJS can give us a different way of repeating that is using two properties ng-repeat-start and ng-repeat-end. To use two these properties, we just declare place where we want to start repeat and stop repeat. You see the following example to better understand.

Example 4: Display String Array repeat by header (start) and footer (end).

Demo

  • Line 12: using ng-repeat-start to start in header.
  • Line 16: display content repeating for each header/footer.
  • Line 18: using ng-repeat-end to end in footer.

Output:

 

Tags: , ,

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Leave a Reply

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