AngularJs采用NG-重复从定制的Json创建表 [英] AngularJs Create Table using ng-repeat from custom Json

问题描述

我要创建HTML表。我用AngularJs指令 - 纳克重复。我这是从服务器加载数据。数据类型是text / JSON。我的JSON结构低于

  [
   {
      分支：wdads
      名：STANDART
      标签：[      ]
      房间：
         {
            roomNo：11时，
            分支：wdads
            时间表：[
               {
                  ID：，
                  状态：免费，
                  的currentdate：2015-10-31T20：00：00.000Z
               }，
               {
                  ID：，
                  状态：免费，
                  的currentdate：2015-10-31T20：00：00.000Z
               }
            ]
         }
      ]
   }，
   {
      分支：wdads
      名：VIP
      标签：[      ]
      房间：
         {
            roomNo：1，
            分支：wdads
            时间表：[
               {
                  ID：，
                  状态：免费，
                  的currentdate：2015-12-29T20：00：00.000Z
               }，
               {
                  ID：，
                  状态：免费，
                  的currentdate：2015-12-29T20：00：00.000Z
               }
            ]
         }，
         {
            roomNo：2，
            分支：wdads
            时间表：[
               {
                  ID：，
                  状态：免费，
                  的currentdate：2015-12-29T20：00：00.000Z
               }，
               {
                  ID：，
                  状态：免费，
                  的currentdate：2015-12-29T20：00：00.000Z
               }
            ]
         }
      ]
   }
]
 

我试图创建表身，但它不工作。我没有结果。

 ＆LT;＆TBODY GT;
            ＆LT; D​​IV NG重复=caterory类别中的＆GT;
              ＆所述; TR＆GT; {{caterory.name}}＆所述; TR＆GT;
              ＆LT; TR NG重复=房间caterory.Rooms＆GT;
                ＆所述; TD＆GT; {{room.roomNo}}＆下; / TD＆GT;
                ＆LT; TD NG重复=，在room.Schedule时间表＆GT; {{schedule.status}}＆LT; / TD＆GT;
              ＆LT; / TR＆GT;
            ＆LT; / DIV＆GT;
          ＆LT; / TBODY＆GT;
 

解决方案

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

您不可能有 DIV 元素直接在表的 TBODY ， THEAD ， TFOOT ， TR 元素，如果你想这样做，那么该HTML将被视为无效的HTML。

您可以有个表 / D 元素中该元素。基本上这个元件被用来在表中显示的数据。

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

1. 您应该将 NG-重复在 TBODY ，并重复 TBODY 表多次。


2. 同时显示从 TR 对表行数据标签，你应该使用 D 元素。当你直接使用 TR 应改为＆LT; TR＆GT;＆LT; TD NG绑定=$第一caterory.name：'？ ＆GT;＆LT; / TD＆GT;＆LT; TR＆GT;

标记

 ＆LT; TBODY NG重复=caterory类别中的＆GT;
    ＆LT; TR NG重复=房间caterory.Rooms＆GT;
      ＆LT; TD NG绑定=$第一caterory.name：？''＆GT;＆LT; / TD＆GT;
      ＆所述; TD＆GT; {{room.roomNo}}＆下; / TD＆GT;
      ＆LT; TD NG重复=，在room.Schedule时间表＆GT; {{schedule.status}}＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
 

更详细的解答这里 如何在使用表 构建HTML。

工作Plunkr

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

解决方案

Basically the html you wrote is invalid 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.

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

Markup

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

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

Working Plunkr

这篇关于AngularJs采用NG-重复从定制的Json创建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！