ng-repeat

Table of Contents

Angular.JS Example

The below code shows an example for ng-repeat directive.
This directive helps to code a loop which automatically updates based on the underlying array.

<HTML>
<HEAD>
    <title>Angular.JS Controller - PrismoSkills</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</HEAD>

<BODY> 
    <div ng-app="store">
        <table border=1 ng-controller="MyController as foo"
                style="border:1px solid black; padding:20px; margin:11px; border-radius:11px; width:700px">
            <tr>
              <th align=center>Language</th>
              <th align=center>Year</th>
              <th align=center>Lead Authors</th>
            </tr>
            <tr ng-repeat="language in foo.property1">
              <td align=center>{{language.name}}</td>
              <td align=center>{{language.year}}</td>
              <td align=center>{{language.founder}}</td>
            </tr>
        </table>
    </div>

    <script>
        var moduleName = 'store';
        var moduleDependencies = [];
        var app = angular.module(moduleName, moduleDependencies);
        
        app.controller ('MyController', function MyFunction()
        {
            this.property1 = [
               {name: "Angular.JS", year: 2009, founder: "Miško Hevery and Adam Abrons"}, 
               {name: "Three.JS",   year: 2010, founder: "Ricardo Cabello"},
               {name: "jQuery",     year: 2006, founder: "John Resig"},
            ];
        });
    </script>
</BODY>
</HTML>

Result:

Language	Year	Lead Authors
{{language.name}}	{{language.year}}	{{language.founder}}

Explanation of ng-repeat directive

As you can see, the loop itself takes care of the number of elements to draw.
Note that each property in the array is a model.
So if anything in the model changes - number of elements in the array or value of a field in
the array element, the corresponding display element is refreshed automatically by angular.

Like us on Facebook to remain in touch
with the latest in technology and tutorials!

Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email:	(Your email is not shared with anybody)

Comment:

Facebook comments:

Site Owner: Sachin Goyal