javascript - How to display the array of data inside table Using Angular.js ng-repeat -
i facing 1 issue.i need display array of data inside table using angular.js.i explaining code below.
table:
<table class="table table-bordered table-striped table-hover" id="datatable" > <tbody> <tr> <td rowspan="2">date</td> <td rowspan="2">id</td> <td rowspan="2">email</td> <td colspan="7">order</td> </tr> <tr> <td>order id</td> <td>status</td> </tr> <tr> <td></td> <td></td> <td></td> <td> </td> <td> </td> </tr> </tbody> </table> i explaining array of data below.
$scope.listofdata= [ { "date": "2016-01-25 18:14:00 2016-02-05 11:26:05", "id": "36", "email": "raj@gmail.com", "order": [ { "order_status": 1, "order_id": 1111 }, { "order_status": 0, "order_id": 2222 }, { "order_status": 1, "order_id": 5555 } ] }, { "date": "2016-01-23 13:15:59 2016-01-25 18:14:00", "id": "37", "email": "rahul@gmail.com", "order": [ { "order_status": 1, "order_id": 3333 }, { "order_status": 0, "order_id": 4444 } ] } ] i need display above data table using angular.js.please me.
run code , check out output. let me know if need different format.. cheers!!!
var app = angular.module("myapp",[]); app.controller("appcontroller",['$scope',appcontroller]); function appcontroller($scope) { $scope.listofdata=[ { "date": "2016-01-25 18:14:00 2016-02-05 11:26:05", "id": "36", "email": "raj@gmail.com", "order": [ { "order_status": 1, "order_id": 1111 }, { "order_status": 0, "order_id": 2222 }, { "order_status": 1, "order_id": 5555 } ] }, { "date": "2016-01-23 13:15:59 2016-01-25 18:14:00", "id": "37", "email": "rahul@gmail.com", "order": [ { "order_status": 1, "order_id": 3333 }, { "order_status": 0, "order_id": 4444 } ] } ]; }<!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> <script src="app.js"></script> </head> <body> <div ng-app="myapp" ng-controller="appcontroller"> <table cellspacing="5px" style="border:1px solid black;"> <tr > <th>date</th> <th>id</th> <th>email</th> <th>order</th> </tr> <tr ng-repeat="orderinfo in listofdata"> <td>{{orderinfo.date}}</td> <td>{{orderinfo.id}}</td> <td>{{orderinfo.email}}</td> <td> <table> <tr> <th>order stat</th> <th>id<th> </tr> <tr ng-repeat="orderstat in orderinfo.order"> <td>{{orderstat.order_status}}</td> <td>{{orderstat.order_id}}</td> </tr> </table> </td> </tr> </table> </div> </body> </html> <!-- table inside row. <tr ng-repeat="orderinfo in listofdata"> <td>{{orderinfo.date}}</td> <td>{{orderinfo.id}}</td> <td>{{orderinfo.email}}</td> <td> <table> <tr ng-repeat="orderstat in orderinfo.order"> <td>{{orderstat.order_status}}</td> <td>{{orderstat.order_id}}</td> </tr> </table> </td> </tr> -->
Comments
Post a Comment