AngularJs 使用自定义 Json 中的 ng-repeat 创建表答案

【问题标题】：AngularJs Create Table using ng-repeat from custom JsonAngularJs 使用自定义 Json 中的 ng-repeat 创建表
【发布时间】：2016-03-03 01:58:18
【问题描述】：

我想创建 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>

【问题讨论】：

当前实现有什么问题？
我没有结果，我的意思是视图方面。
您是否尝试过我在以下答案中的建议？
不抱歉，我不明白你的建议。能再解释一下吗？

标签： javascript html angularjs html-table angularjs-ng-repeat

【解决方案1】：

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

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

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

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

您应该将ng-repeat 放在tbody 上，并多次重复表格的tbody。
当显示来自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

【讨论】：

当我尝试使用此代码时，我有不同的表体。我没有 {{caterory.name}} 表中的这一行
你能帮我解决这个问题吗？
@zuri 是的，我已经解决了你的问题..请查看更新的代码答案..我正在更新解释..
这段代码很适合我， {{ Caterory.name }}
是否可以这样做 ng-click="{{ schedule.action }}"。我需要调用不同的函数。当我写这篇文章时，我收到以下错误语法错误：从 [{ schedule.action }}] 开始的表达式 [{{ schedule.action }}] 第 2 列的令牌“{”无效键。

【解决方案2】：

做点什么

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

【讨论】：

结果相同，无法使用此代码创建表体