ng-init and ng-repeat in AngularJs
In this blog, I’m explaining about the ng-init and
ng-repeat directive in angularjs and how to implement it.
If you want to learn about angularjs, then you can see my blog:
ng-init Directive
The ng-init directive initializes an AngularJS
Application data. It is used to assign values to the variables. In the
following example, we initialize an array of studentList. I have use JSON
syntax to define the array of studentList.
<div ng-app="" ng-init="studentList=[{Name:'Mark David', City:'New York'},
{Name:'Steve Benson', City:'London'},
{Name:'Mary William', City:'Sydney'}]">
ng-repeat Directive
The ng-repeat directive repeats HTML elements for each item in a
collection. In the following example, we iterate over the array of studentList.
<p>List Of Students</p>
<ol>
<li ng-repeat="item in studentList">
Name : {{item.Name}} City : {{item.City}}
</li>
</ol>
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>AngularJs
Application</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="studentList=[{Name:'Mark
David', City:'New York'},
{Name:'Steve Benson', City:'London'},
{Name:'Mary
William', City:'Sydney'}]">
<p>List Of Students</p>
<ol>
<li ng-repeat="item in studentList">
Name : {{item.Name}} City :
{{item.City}}
</li>
</ol>
</div>
</body>
</html>
Output
No comments:
Post a Comment