html - Dynamic table creation with ng-repeat in angularjs -
i want generate dynamic table dynamic table header , row/columns according json object comes webapi.
here examples of json object comes every time different.
[ {"country":"australia","toner quantity":8}, {"country":"china","toner quantity":6}, {"country":"india","toner quantity":11}, {"country":"south korea","toner quantity":1} ] and time comes like
[ {"customername":"ford","australia":0,"china":2,"india":0,"south korea":0}, {"customername":"icici prudential","australia":0,"china":0,"india":5,"south korea":0}, {"customername":"kimberly clark","australia":0,"china":0,"india":0,"south korea":1}, {"customername":"mcdonalds","australia":1,"china":0,"india":0,"south korea":0}, {"customername":"novartis","australia":1,"china":0,"india":0,"south korea":0}, {"customername":"origin energy","australia":3,"china":0,"india":0,"south korea":0} ] so have tried not able achieve dynamic table headers , row/columns
my html code like
<table class="table striped"> <thead> <tr role="row"> <th ng-repeat="th in dataconfigurelistdata.previewdata">{{th}}</th> </tr> </thead> <tbody> <tr role="row" data-ng-repeat="previewdata in dataconfigurelistdata.previewdata"> <td> {{previewdata.country}}</td> <td> {{previewdata['total toner qty']}}</td> </tr> </tbody> </table>
you can using ng-repeat inside another. , also, use first line render headers.
the following snippet implements solution.
angular.module('myapp', []) .controller('mycontroller', function($scope) { $scope.myarray = [{ "customername": "ford", "australia": 0, "china": 2, "india": 0, "south korea": 0 }, { "customername": "icici prudential", "australia": 0, "china": 0, "india": 5, "south korea": 0 }, { "customername": "kimberly clark", "australia": 0, "china": 0, "india": 0, "south korea": 1 }, { "customername": "mcdonalds", "australia": 1, "china": 0, "india": 0, "south korea": 0 }, { "customername": "novartis", "australia": 1, "china": 0, "india": 0, "south korea": 0 }, { "customername": "origin energy", "australia": 3, "china": 0, "india": 0, "south korea": 0 }]; }); angular.element(document).ready(function() { angular.bootstrap(document, ['myapp']); });table { border-collapse: collapse; } td, th { padding: 2px 4px; }<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <table ng-controller="mycontroller" border="1"> <tr> <th ng-repeat="(key, val) in myarray[0]">{{ key }}</th> </tr> <tr ng-repeat="row in myarray"> <td ng-repeat="column in row"> {{ column }} </td> </tr> </table>
Comments
Post a Comment