javascript - AngularJs 使用来自自定义 Json 的 ng-repeat 创建表

Question

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

[  
   {  
      "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"
               }
            ]
         }
      ]
   }
] 

我正在尝试创建表体，但它不起作用。我没有结果。

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

Answer 1

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

你不能有 div元素直接在里面table的 tbody , thead , tfoot , tr元素，如果您尝试这样做，那么该 HTML 将被视为无效的 html。

您可以在 th 中包含该元素/td表的元素。基本上，这些元素用于在表格上显示数据。

要解决您的问题，您需要做几件事。

1. 你应该把ng-repeat在 tbody ，并重复 tbody表多次。
2. 同时显示来自 tr 的表行数据你应该使用的标签 td元素。由于您直接使用 tr应该改为<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>

这里有更详细的答案How to structure html while using table .

Working Plunkr