\

ng-repeat Directive With Json Data In Angular JS

ng-repeat Directive With Json In Angular JS

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




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>

ng-repeat with links



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




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.

About This Author

Hi This Is Rehmaanali. Blogging Is Just A Hobby. Graduate In Bsc Computer Science

Post A Reply