Contents hide 1) ng-repeat 1.1) AngularJS (CDN Link) 2) ng-repeat with tables 3) ng-repeat with links 4) ng-repeat With Images In this tutorial we will se how to use the ng-repeat Directive With Json In Angular JS such as : ng-repeat with tables. ng-repeat with links. ng-repeat with images. ng-repeat The ng-repeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key. In other word it reads the json data and instantly it display all the data through one html tag. It property is to perform the loop till the data in the json object ends. AngularJS (CDN Link) <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> ng-repeat with tables Demo In this concept we will see the functioning of the ng-repeat directive in angularJS through tables. The tables data loads through the json object. This leads to less declaration of single html tags, as it performs loop. Lets us see one of the example of ng-repeat with tables. app.js var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope) { $scope.options = { //JSON DATA langs: [ {label: 'Name', value: 'geekstrick'}, {label: 'Status', value: 'Active'}, {label: 'Course', value: 'Programming'}, {label: 'Since', value: '2017'}, {label: 'Author', value: 'Rehmaanali'} ], }; }); index.html <html> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src= "./app.js"></script> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="l in options.langs"> <td>{{ l.label }}</td> <td>{{ l.value }}</td> </tr> </table> </div> </body> </html> The Json contains th key value pair. So it take the key i.e {{ l.label }} and prints its value. ng-repeat with links Demo We will see the functioning of the ng-repeat directive in angularJS through Links. The links are loads through the json object. It can also index the link for a perticular name. Lets us see one of the example of ng-repeat with Links. app.js var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope) { $scope.options = { // JSON Data langs: [ {label: 'GeeksTrick', link: 'http://www.geekstrick.com'}, {label: 'Google', link: 'https://www.google.com'}, {label: 'Facebook', link: 'https://www.facebook.com'}, {label: 'Instagram', link: 'https://www.instagram.com'}, {label: 'Twitter', link: 'https://www.twitter.com'} ], }; }); index.html <html> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <a ng-repeat="l in options.langs" href="{{ l.link }}">{{ l.label }}</a> </div> </body> </html> The directive ng-repeat will classify particular link to a particular name. ng-repeat With Images Demo In this concept we will see the functioning of the ng-repeat directive in angularJS through images. The images source will loads through the json object. Lets us see one of the example of ng-repeat with images. app.js var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope) { $scope.options = { // JSON Data langs: [ { link: 'https://s-media-cache-ak0.pinimg.com/originals/2d/fb/d3/2dfbd38983291d3d0e5c1cb0667406b5.jpg'}, { link: 'https://s-media-cache-ak0.pinimg.com/originals/e3/48/19/e34819dd10cff77a959733c110cda901.jpg'}, { link: 'http://www.pngmart.com/files/4/Cute-Cartoon-PNG-Picture.png'}, { link: 'http://www.kidsworldfun.com/images/story-contest/2016-2/elephant-cartoon.png'}, ], }; }); index.html <html> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <img ng-repeat="l in options.langs" src="{{ l.link }}"/> </div> </body> </html> The directive ng-repeat will get the source and display the image through image tag. Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: angularjs, html5, JavaScript