Using ngController With ngRepeat In AngularJS to List Items in Table Example

Using ngController With ngRepeat In AngularJS to List Items in Table Example

In this tutorial i am going to tell you about ng-repeat directory to display your array data in a table.

As in programming, you iterate over the collection of objects in same way you will use ng-repeat directive in angularjs. using ng-repeat directive you can repeat your html elements.

ng-repeat works on array of objects and iterate over object properties.

  1. <div ng-repeat="(key, value) in arrayObject"> ... </div>
Find duplicates data in object

You can use track by $index if you think there is possibilty of duplicate data.

  1. <div ng-repeat="n in [1, 1, 2, 2] track by $index">
  2. {{n}}
  3. </div>
Display data in table using ng-repeat
  • <div ng-app="myApp" ng-controller="productCtrl">
  • <table>
  • <tr>
  •     <th>Name</th>
  •     <th>Details</th>
  • </tr>
  • <tr ng-repeat="x in products">
  • <td>{{ x.name }}</td>
  • <td>{{ x.details }}</td>
  • </tr>
  • </table>
  • </div>

  1. angular.module('myApp', ['ngAnimate']).controller('productCtrl', function($scope) {
  2. $scope.products = [
  3. {name:'expertphp', details:'Best PHP Tutorial and articles available'},
  4. {name:'demo expertphp',details:'demo of each post'}
  5. ];
  6. });

You can access your json data from server to display in table by using $http service.


  1. var app = angular.module('myApp', []);
  2. app.controller('productCtrl', function($scope, $http) {
  3. $http.get("http://www.expertphp.in/category/php")
  4. .then(function (response) {$scope.products = response.data.products;});
  5. });

Phone: (+91) 8800417876
Noida, 201301
ataşehir escort maltepe escort bostancı escort kadıköy escort maltepe escort ataşehir escort tuzla escort pendik escort ümraniye escort kartal escort
pendik escort
izmir escort izmir escort izmir escort izmir escort denizli escort antalya escort antalya escort antalya escort izmir escort izmir escort izmir escort izmir escort izmir escort