Looping With Ng-repeat in AngularJS

Before reading this article I would highly recommend reading my previous article first Getting Started AngularJS first. In this article we will learn how to display data to loop through using ng-init and ng-repeat directives.

ng-repeat

Instantiate an element once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item and $index is set to the item index or key.

ng-init

ng-init is a directive that can be placed inside a div and inside a span as well, it allows evaluation of an expression in the current scope.

Getting Started

  • Start Visual Studio
  • Create a new website
  • Provide the name and location of website
  • Click "Next"

First thing add ng-app directive in HTML tag or in div tag.

<html data-ng-app="">

Add angular.min.js to the scripts directory.

Now add an HTML page and make a reference of the angular.min.js path.

Let's add the HTML now.



Result
Result
Let's do filtration


In above the HTML as you can see we have a friends list array with property name, designation and location.

Check Output
Output
Put some text in the TextBox:

text in textbox
Again put text in textbox
Let's do data binding using data-ng-controller.

Add a new JavaScript file and provide a name, whatever you want.
 
java script file

Output
AngularJs
Conclusion

In this article we saw the ng-repeat directive. Comments and messages are most welcome. In the next article we'll learn how to add a controller in AngularJS.


Similar Articles