I want to create html table. I use AngularJs directive - ng-repeat. I have data which is loaded from server. Data type is text/json. My Json structure is below
[
{
"branch":"wdads",
"name":"STANDART",
"Tags":[
],
"Rooms":[
{
"roomNo":"11",
"branch":"wdads",
"Schedule":[
{
"id":"",
"status":"free",
"currentDate":"2015-10-31T20:00:00.000Z"
},
{
"id":"",
"status":"free",
"currentDate":"2015-10-31T20:00:00.000Z"
}
]
}
]
},
{
"branch":"wdads",
"name":"VIP",
"Tags":[
],
"Rooms":[
{
"roomNo":"1",
"branch":"wdads",
"Schedule":[
{
"id":"",
"status":"free",
"currentDate":"2015-12-29T20:00:00.000Z"
},
{
"id":"",
"status":"free",
"currentDate":"2015-12-29T20:00:00.000Z"
}
]
},
{
"roomNo":"2",
"branch":"wdads",
"Schedule":[
{
"id":"",
"status":"free",
"currentDate":"2015-12-29T20:00:00.000Z"
},
{
"id":"",
"status":"free",
"currentDate":"2015-12-29T20:00:00.000Z"
}
]
}
]
}
]
I'm trying to create table body, but it does not working. I don't have result.
<tbody>
<div ng-repeat="caterory in categories">
<tr>{{caterory.name}}<tr>
<tr ng-repeat="room in caterory.Rooms">
<td>{{room.roomNo}}</td>
<td ng-repeat="schedule in room.Schedule">{{schedule.status}}</td>
</tr>
</div>
</tbody>
Do something
Basically the html you wrote is invalid html.
You could not have
div
element directly insidetable
'stbody
,thead
,tfoot
,tr
elements, If you tried to do this then that HTML would be considered as an invalid html.You could have that element inside
th
/td
element of the table. Basically this elements are used to display data on table.To solving you problem you need to do couple of things.
ng-repeat
ontbody
, and repeatingtbody
of table multiple times.tr
tag you should usetd
element. As you are directly usingtr
should be changed to<tr><td ng-bind="$first ?caterory.name : ''"></td><tr>
Markup
More detailed answer here How to structure html while using table.
Working Plunkr