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

Posted 2023-03-05

【中文标题】AngularJs 使用自定义 Json 中的 ng-repeat 创建表

【英文标题】：AngularJs Create Table using ng-repeat from custom Json

【发布时间】：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>

【问题讨论】：

当前实现有什么问题？

我没有结果，我的意思是视图方面。

您是否尝试过我在以下答案中的建议？

不抱歉，我不明白你的建议。能再解释一下吗？

【参考方案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>

【讨论】：

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