|
ng-repeatAngular.JS ExampleThe 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:
Explanation of ng-repeat directiveAs 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. |
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: