AngularJs 使用自定义 Json 中的 ng-repeat 创建表 [英] AngularJs Create Table using ng-repeat from custom Json

问题描述

我想创建 html 表格.我使用 AngularJs 指令 - ng-repeat.我有从服务器加载的数据.数据类型为 text/json.我的 Json 结构如下

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>

<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>

推荐答案

基本上你写的html是无效的html.

Basically the html you wrote is invalid html.

您不能在 table 的 tbody、thead、tfoot 中直接使用 div 元素, tr 元素，如果您尝试这样做，那么该 HTML 将被视为无效 html.

You could not have div element directly inside table's tbody, thead, tfoot, tr elements, If you tried to do this then that HTML would be considered as an invalid html.

您可以将该元素放在表格的 th/td 元素中.基本上这些元素用于在表格上显示数据.

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.

1. 您应该将 ng-repeat 放在 tbody 上，并多次重复表的 tbody.
2. 当从 tr 标签显示表格行上的数据时，您应该使用 td 元素.由于您直接使用 tr 应更改为 <tr><td ng-bind="$first ?caterory.name : ''"></td><;tr>

1. You should place the ng-repeat on tbody, and repeating tbody of table multiple times.
2. While showing data on table row from tr tag you should use td element. As you are directly using tr should be changed to <tr><td ng-bind="$first ?caterory.name : ''"></td><tr>

标记

<tbody ng-repeat="caterory in categories">
    <tr ng-repeat="room in caterory.Rooms">
      <td ng-bind="$first ?caterory.name : ''"></td>
      <td>{{room.roomNo}}</td>
      <td ng-repeat="schedule in room.Schedule">{{schedule.status}}</td>
    </tr>
</tbody>

这里有更详细的答案如何在使用表格时构建 html.

More detailed answer here How to structure html while using table.

工作 Plunkr

这篇关于AngularJs 使用自定义 Json 中的 ng-repeat 创建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！