javascript - Generate html table using angular -
i want generate html table using angular.i have json object , used ng-repeat add multiple rows. table structure different. want generate table structure this:
<table> <tr> <td >id</td> <td>sub</td> </tr> <tr> <td rowspan="3">1</td> <td>s1</td> </tr> <tr> <td>s2</td> </tr> <tr> <td>s3</td> </tr> </table> -------------- id | subjects -------------- | s1 -------- 1 | s2 -------- | s3 -------------- | s4 -------- 2 | s5 -------- | s6 -------------- user:[ {id:1 , subjects:[ {id:1 , name:"eng"} {id:2 , name:"phy"} ] }, { id:2 , subjects:[ {id:1 , name:"eng"} {id:3 , name:"math"} ] } ]
my angular code is:
<tr ng-repeat = "user in users"> <td>{{user.id}}</td> <td>{{user.subject}}</td> </tr>
i want know how generate table structure above
you need use ng-repeat-start
, ng-repeat-end
. example:
var app = angular.module('myapp', []); app.controller('mycontroller', function ($scope) { var users = [{ id: 1, subjects: [{ id: 1, name: "eng" }, { id: 2, name: "phy" }] }, { id: 2, subjects: [{ id: 1, name: "eng" }, { id: 3, name: "math" }] }]; $scope.users = users; });
table { border-collapse: collapse; } td { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <table ng-app="myapp" ng-controller="mycontroller"> <thead> <tr> <td>id</td> <td>subjects</td> </tr> </thead> <tbody> <tr ng-repeat-start="user in users"> <td rowspan="{{user.subjects.length+1}}">{{user.id}}</td> </tr> <tr ng-repeat-end ng-repeat="subject in user.subjects"> <td>s{{subject.id}}</td> </tr> </tbody> </table>
also, working fiddle here: http://jsfiddle.net/donal/r51d5fw5/17/
Comments
Post a Comment