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
kadıköy escort tuzla escort kurtköy escort kartal escort maltepe escort bakırköy escort ataşehir escort
En kaliteli ve Gerçek sex hikaye 'lerini okuyabilir ve kendi seks hikayelerinizi paylaşabilirsiniz.
Türkiyenin en iyi hd porno izle sitesi 7dak ile doyumsuz türk sikişleri seyredin.
şişli 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
ankara escort
çeşme escort
kurtköy escort escort pendik
Betwinner