Using ngController With ngRepeat In AngularJS to List Items in Table Example
In this post we will give you information about Using ngController With ngRepeat In AngularJS to List Items in Table Example. Hear we will give you detail about Using ngController With ngRepeat In AngularJS to List Items in Table ExampleAnd how to use it also give you demo for it if it is necessary.
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.
- <divng-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
- <divng-app="myApp"ng-controller="productCtrl">
- <table>
- <tr>
- <th>Name</th>
- <th>Details</th>
- </tr>
- <trng-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:'onlinecode', details:'Best PHP Tutorial and articles available'},
- {name:'demo onlinecode',details:'demo of each post'}
- ];
- });
angular.module('myApp', ['ngAnimate']).controller('productCtrl', function($scope) { $scope.products = [ {name:'onlinecode', details:'Best PHP Tutorial and articles available'}, {name:'demo onlinecode',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.onlinecode.org/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.onlinecode.org/category/php") .then(function (response) {$scope.products = response.data.products;});});Label :
Angular JS
How To
Hope this code and post will helped you for implement Using ngController With ngRepeat In AngularJS to List Items in Table Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs