Post
Ask Question

Using Ng-init and Ng-repeat Directive of AngularJS in ASP.Net Application

Introduction

This article explains how to use the ng-init and ng-repeat directives of AngularJS in an ASP.NET Application.

A template is instantiated by ng-repeat for each item present in a collection. A specific scope is provided for each template. In this scope, a variable is set to the current collection item.

ng-init is used only with ng-repeat, it is used for aliasing special properties of ng-repeat.

Step 1. For making today's application you need to add two external files, one is angular.min.js and the second is angular-animate.min.js.

You can download the Zip file provided at the start of this article and then fetch these js files from it.

After downloading these files you need to add them to the beginning of the application, in other words in the head tag.

<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>

Step 2. Now we will first declare some default values that will be used to show how to use the repeat directive. These values will be provided using the init directive.

<div ng-init="cars = [
  {name:'Honda City', buy_in:2003, price:700000},
  {name:'Laura', buy_in:2005, price:1300000},
  {name:'Cruze', buy_in:2010, price:1700000},
  {name:'Audi Q6', buy_in:2013, price:5200000}
]">

Here I initialized the value to the Scope using the init directive. Three columns are created in which four different Rows of values are defined.

Step 4. Now I will show how the ng-repeat directive can be used and how it works.

<h2>I have {{cars.length}} cars and they are:</h2>

<ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="car in cars">
        [{{$index + 1}}] {{car.name}} was bought in {{car.buy_in}} at a price of {{car.price}}.
    </li>
</ul>

Here first I am showing the number of rows that have the data, which can be found using "length", then I took an unordered list in which a List is taken, in this list ng-repeat is used. ng-repeat will help us to show all the data using a list only for one time.

In ng-repeat "car in cars" is declared, cars were declared in the init but car is a variable and you can define it with any name you like.

Then [{{$index+1}}] is used, this will act as a serial number for each row, and it will be automatically incremented on each new row added, after this car. name, car.buy_in, and car. price are used that will show the data for a different row.

Now our application is ready for execution.

The complete code of this application is as follows.

<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <script src="angular.min.js"></script>
    <script src="angular-animate.min.js"></script>
</head>

<body>
    <form id="form1" runat="server">
        <div ng-init="cars = [
            {name:'Honda City', buy_in:2003, price:700000},
            {name:'Laura', buy_in:2005, price:1300000},
            {name:'Cruze', buy_in:2010, price:1700000},
            {name:'Audi Q6', buy_in:2013, price:5200000}
        ]">
            <h2>I have {{cars.length}} cars and they are:</h2>
            <ul class="example-animate-container">
                <li class="animate-repeat" ng-repeat="car in cars">
                    [{{$index + 1}}] {{car.name}} was bought in {{car.buy_in}} at a price of {{car.price}}.
                </li>
            </ul>
        </div>
    </form>
</body>

</html>

Output

On running the application you will get the output like this.

Output


Similar Articles