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 the website
- Click "Next"
First thing add the ng-app directive in the HTML tag or in the 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.
![HTML]()
Result
![Result]()
Let's do filtration.
![Filtration]()
Above the HTML as you can see we have a friends list array with the property name, designation, and location.
Check Output
![Output]()
Put some text in the TextBox.
![Textbox]()
![Text]()
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.