AngularJS - Directive - "ng-repeat"

Directive ng-repeat is similar to foreach loop in C#. 

Examples: Lets we have to display employees in a table with their name, gender and city.

Define controller:

var myApp = angular.module('myApp', [])

                                         .controller('myController', function($scope){

                                                var employees = [
                                                       { name: Pratibha Hyanki,  gender: Female,  city: India},
                                                       { name: Akira,  gender: Female, city: Mumbai},
                                                       { name: Dan,  gender: Male, city: Delhi}
                                                ];    

                                                 $scope.employees = employees;

                                          });

Using this controller:

     <div ng-controller='myController'>

              <div>
                       <table>
                             <tr ng-repeat ='employee in employees'>
                                    <td> {{employee.name}}  </td>
                                    <td> {{employee.gender}} </td>
                                    <td>{{employee.city}} </td>
                       </table>

              </div>    

    </div>

This code generates the three rows showing three employees data from employees model.

Example for Nesting ng-repeat

Lest say , now we need to show the employee with skill details as below:

• Pratibha Hyaki
• .Net
• Javascript
• Asp.Net
• Akira 
• Ruby
• JQuery
• WebAPI
• Dan 
• Java
• AngularJS
• Python

Define controller:

var myApp = angular.module('myApp', [])

                                         .controller('myController', function($scope){

                                                var employees= [

                                                       { name: Pratibha Hyanki, gender: Female,

                                                             skills: [

                                                                   { name: '.Net'},

                                                                   { name: 'javascript'},
                                                                   { name: '.Asp.Net'},

                                                            ]      

                                                        },

                                                       { name: Akira,  gender: Female,

                                                             skills: [
                                                                   { name: 'Ruby'},
                                                                   { name: 'JQuery'},
                                                                   { name: '.WebAPI'},
                                                            ]   
                                                       },

                                                       { name: Dan,  gender: Male,

                                                             skills: [
                                                                   { name: 'Java'},
                                                                   { name: 'AngularJS'},
                                                                   { name: 'Python'},
                                                            ]  
                                                        }
                                                ]; 

                                                 $scope.employees = employees;

                                          });

Using this controller:

     <div ng-controller='myController'>

              <div>
                       <ul>
                             <li ng-repeat ='employee in employees'>
                                    {{employee.name}}  
                                    <ul>
                                         <li ng-repeat 'skill in employee.skills'>
                                                {{ skill.name }}
                                         </li>
                                    </ul>
                             </li>       
                       </ul>

              </div> 

    </div>

The ng-init directive:

Lets say now you need to show the index of each employee and skill items. To find the index of an item in the collection use $index property. To find the index of the parent element use $parent.$index or use ng-init ="parentIndex = $index" .

Example:

<div ng-controller='myController'>

              <div>
                       <ul>
                             <li ng-repeat ='employee in employees' ng-init ='parentIndex = $index'>
                                    {{employee.firstName}}   {{employee.lastName}} - Index = {{$index}}
                                    <ul>
                                         <li ng-repeat 'skill in employee.skills'>
                                                {{ skill.name }} - Parent Index = {{$parent.$index}}, Parent Index =                                                         {{parentIndex}},  Index = {{$index}}
                                         </li>
                                    </ul>
                             </li>       
                       </ul>

              </div>  

    </div>
The ng-init directive allows you to evaluate an expression in the current scope. In the real world application you should use a controller instead of ng-init to initialise values on scope as that's the job of a controller. The ng-init should only be used for aliasing special properties of ng-repeat directive. Example: $index