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

Posted 8 years ago By Ajay Gupta 41720

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.

<div ng-repeat="(key, value) in arrayObject"> ... </div>

<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.

<div ng-repeat="n in [1, 1, 2, 2] track by $index">
  {{n}}
</div>

<div ng-repeat="n in [1, 1, 2, 2] track by $index">  {{n}}</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>

<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>

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

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

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

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

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

You can repeat multiple elements using ng-repeat-start and ng-repeat-end directive.

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

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

Tags :

Related Posts

Angularjs Form Submit Example

How to apply Search Sort and Pagination in AngularJS Example using dir-pagination-controls

Angularjs two way data binding with directive isolate scope binding example

AngularJS Remove Hashtag From The Routing URL – $locationProvider

AngularJS PHP - upload and display image using FileReader with example

Understanding AngularJS Controllers and scope inheritance with example

AngularJS - How to Create a Custom Slugify Filter for SEO friendly URL

A Simple example of Get, Set and Clear Cookie in AngularJS

Dependent Dynamic dropdown using Angular Js and Laravel 5.6