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
sakarya escort sakarya escort sakarya escort sakarya escort serdivan escort izmir escort eporner
akyazı escort sakarya escort ferizli escort sakarya escort geyve escort sakarya escort hendek escort sakarya escort karasu escort sakarya escort sapanca escort serdivan escort webmaster forum ankara travesti