Javascript AngularJs使用自定义Json中的ng repeat创建表

我想创建html表。我使用AngularJs指令-ng repeat。我有从服务器加载的数据。数据类型为text/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>

{{caterory.name}
{{room.roomNo}
{{schedule.status}

基本上，您编写的html是无效的html

您不能将

div

元素直接放在

table

的

tbody

、

thead

、

tfoot

、

tr

元素中，如果您尝试这样做，则HTML将被视为无效HTML

您可以将该元素放在表的

th

/

td

元素中。基本上，这些元素用于在表上显示数据

要解决你的问题，你需要做两件事

您应该将

ng repeat

放在

tbody

上，并多次重复表的

tbody

从

tr

标记在表行上显示数据时，应使用

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>

{{room.roomNo}
{{schedule.status}

这里有更详细的答案

做点什么

<tbody>
     <tr ng-repeat="caterory in categories">{{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>
</tbody>

{{caterory.name}
{{room.roomNo}
{{schedule.status}

当前的实现存在什么问题？我没有结果，结果我指的是视图方面。您是否尝试了我在下面的回答中提出的建议？不，对不起，我不理解您的建议。您能再解释一下吗？结果是一样的，当我尝试使用此代码时，无法使用此代码创建表体。我有不同的表体。我没有{{caterory.name}这一行在表中，你能帮我解决这个问题吗？@zuri是的，我已经解决了你的问题..请看更新的代码并回答..我马上更新解释..这个代码对我来说很好，{{caterory.name}可以这样做吗。我需要调用不同的函数。当我写这篇文章时，我得到了以下错误语法错误：从[{schedule.action}]开始的表达式[{{schedule.action}}]的第2列中的标记“{”无效键。