ng-repeat is just like to
foreach loop in C#.
We will understand
with an example
1.
Go to the visual studio and add a project and right click on the
solution and add a script file and give it name as “Controller.js” and write
the following code to this file
The controller
function builds the model for the view. The model Student has the list of all Student
info.
Here Student information we will store as the array like
following code
|
/// < reference
path="angular.min.js" />
var myApp = angular.module('MyModule', []);
myApp.controller("myController", function ($scope) {
var StudentInfo = [
{ Name: "Munesh", CollageName: "VIT" },
{ Name: "Rahul", CollageName: "ABC" },
{ Name: "Anshuman", CollageName: "XYZ" }
];
$scope.StudentInfo =
StudentInfo;
});
|
2. Now add a HTML file to your solution and
give it name as “Index.html” and write the following code to this file
3. In the view, we are using ng-repeat directive which loops through
each info in studentInfo array. For each info,
we a get a table row, and in each table cell of the table row, the respective StudentInfo
details (Name and CollageName) are retrieved using the angular binding
expression.
|
<!doctype html>
<html ng-app="MyModule">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Controller.js"></script>
</head>
<body>
<div ng-controller="myController">
<table border="1">
<thead>
<tr>
<th>Student Name</th>
<th>Collage Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="info in
StudentInfo">
<td> {{info.Name}}</td>
<td> {{info.CollageName}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
When you will
run the application output will be like the following
EmoticonEmoticon