Looping in Angular.js

In this article I will show how to use the looping functionality in Angular.js.

Step 1: Create an empty ASP.NET website named "Angular_JS".

Create a empty Asp Net website

Step 2: Add a page of HTML into it named "Looping.htm".

page

Step 3: Download the Angular.js from the link Angularjs and save it into your website.

 Download the Angular

Note: I am using Angular.min.js in this website.

Step 4: After adding the Angular.js to the website, write the script tag that will access the Angular file as in the following:

adding the Angular.js

Step 5: Now to write the code using Directives and Data binding expressions into the page.
  • Write the ng-app directive in the <html> tag, that is necessary to initialize the Angular app like:

    <html ng-app xmlns="http://www.w3.org/1999/xhtml"></html>
     
  • Write the ng-init directive in the <div> tag, that will initialize the data in the variable named "names" like in an Array as in the following:

    <div ng-init="names=['Ramesh','Suresh','Dinesh','Rajesh']"></div>
     
  • Now write the ng-repeat directive with a "names" variable in a <li> tag like foreach loop in C# as in the following:

    <li ng-repeat="x in names"> </li>
     
  • In the end write a Data Binding Expression of the variable "x" within the brackets syntax that will iterate the values of names variable. It will write like:

    {{x}}

Directives and Data binding expression 

Step 6: Run the page and see the output.
 
output 

Up Next
    Ebook Download
    View all
    Learn
    View all