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]()
ConclusionIn 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.