Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

AngularJS ng-repeat directive

Suggested Videos
Part 3 - Controllers in AngularJS
Part 4 - AngularJS ng-src directive
Part 5 - Two way databinding in AngularJS



In this video we will discuss 
1. ng-repeat directive in Angular
2. Nesting ng-repeat with an example



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

Let us understand this with an example. Here is what we want to do.
1. For each employee we have in the employees array we want a table row. With in each cell of the table row we to display employee
  • Firstname
  • Lastname
  • Gender
  • Salary
AngularJS ng-repeat directive

This can be achieved very easily using ng-repeat directive

Script.js : The controll function builds the model for the view. The model employees has the list of all employees.

var app = angular
            .module("myModule", [])
            .controller("myController", function ($scope) {

                var employees = [
                    { firstName: "Ben", lastName: "Hastings", gender: "Male", salary: 55000 },
                    { firstName: "Sara", lastName: "Paul", gender: "Female", salary: 68000 },
                    { firstName: "Mark", lastName: "Holland", gender: "Male", salary: 57000 },
                    { firstName: "Pam", lastName: "Macintosh", gender: "Female", salary: 53000 },
                    { firstName: "Todd", lastName: "Barber", gender: "Male", salary: 60000 }
                ];

                $scope.employees = employees;
            });

HtmlPage1.html : In the view, we are using ng-repeat directive which loops thru each employee in employees array. For each employee, we a get a table row, and in each table cell of the table row, the respective employee details (Firstname, Lastname, Gender, Salary) are retrieved using the angular binding expression.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        <table>
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Gender</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees">
                    <td> {{ employee.firstName }} </td>
                    <td> {{ employee.lastName }} </td>
                    <td> {{ employee.gender }} </td>
                    <td> {{ employee.salary }} </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Nested ng-repeat example : The model contains an array of countries, and each country has an array of cities. The view must display cities nested under their respective country.

nested ng-repeat example

Script.js : The model is an array of countries. Each country contains an array of cities.

var app = angular
            .module("myModule", [])
            .controller("myController", function ($scope) {

                var countries = [
                    {
                        name: "UK",
                        cities: [
                            { name: "London" },
                            { name: "Birmingham" },
                            { name: "Manchester" }
                        ]
                    },
                    {
                        name: "USA",
                        cities: [
                            { name: "Los Angeles" },
                            { name: "Chicago" },
                            { name: "Houston" }
                        ]
                    },
                    {
                        name: "India",
                        cities: [
                            { name: "Hyderabad" },
                            { name: "Chennai" },
                            { name: "Mumbai" }
                        ]
                    }
                ];

                $scope.countries = countries;
            });

HtmlPage1.html : Notice that we are using two ng-repeat directives in the view, one nested inside the other. The outer ng-repeat directive loops thru each country in the model. The inner ng-repeat directive loops thru each city of a given country.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        <ul ng-repeat="country in countries">
            <li>
                {{country.name}}
                <ul>
                    <li ng-repeat="city in country.cities">
                        {{city.name}}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Finding the index of an item in the collection : 
  • To find the index of an item in the collection use $index property
  • To get the index of the parent element
    • Use $parent.$index or
    • Use ng-init="parentIndex = $index"
The following example, shows how to retrive the index of the elements from a nested collection

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        <ul ng-repeat="country in countries" ng-init="parentIndex = $index">
            <li>
                {{country.name}} - Index = {{ $index }}
                <ul>
                    <li ng-repeat="city in country.cities">
                        {{city.name}} - Parent Index = {{ parentIndex }}, Index = {{ $index }}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

AngularJS tutorial for beginners

3 comments:

  1. Hi Venkat, great videos which clearly makes us to understand the concepts easily, Here i have one doubt can u please clarify it, Can we use same ng-app defined in script.js file in multiple html pages?

    ReplyDelete
  2. Hello,

    Suppose I want to use the dike dislike functionality in my project and I dont want the repeat process. In that case what should i have to write in the place of ng-repeat?

    Thanks

    ReplyDelete
  3. same thing in my project
    i have nested list,i have to hide by default when user click particular
    country then i have to show states in it.
    i want show and hide states based on user clicked country.

    help how do i achieve this

    ReplyDelete

It would be great if you can help share these free resources