Make delicious recipes!


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.
    <title>Angular.JS Controller - PrismoSkills</title>
    <link rel="stylesheet" href="">
    <script src=""></script>

    <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">
              <th align=center>Language</th>
              <th align=center>Year</th>
              <th align=center>Lead Authors</th>
            <tr ng-repeat="language in foo.property1">
              <td align=center>{{}}</td>
              <td align=center>{{language.year}}</td>
              <td align=center>{{language.founder}}</td>

        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"},


Language Year Lead Authors
{{}} {{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:

Email: (Your email is not shared with anybody)

Facebook comments:

Site Owner: Sachin Goyal