ng-repeat in angularJS

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
                      



Share this

Related Posts

Previous
Next Post »