Question

我从服务器获取了json

[
   {
      "guid":"54db86c947b39358ab2c266a",
      "modified":0,
      "created":0,
      "name":"iOS",
      "criteria":[
         {
            "name":"Supportability",
            "value":1,
            "reasons":[
               "we do not know the tech"
            ]
         },
         {
            "name":"Core Image",
            "value":1,
            "reasons":[
               "Some reason",
               "Reason 2"
            ]
         },
         {
            "name":"Deployment",
            "value":1,
            "reasons":[
               "no servers"
            ]
         },
         {
            "name":"Hardware",
            "value":1,
            "reasons":[
               "hardware too expensive"
            ]
         },
         {
            "name":"Security",
            "value":1,
            "reasons":[
               "plain text password"
            ]
         },
         {
            "name":"Application",
            "value":0.85,
            "reasons":[
               "332 out of 1600 apps are not package for W10"
            ]
         }
      ],
      "type":"Software"
   },
   {
      "guid":"54db81ab47b3187eceaef46e",
      "modified":0,
      "created":0,
      "name":"Windows 8",
      "criteria":[
         {
            "name":"Supportability",
            "value":1,
            "reasons":[
               "we do not know the tech"
            ]
         },
         {
            "name":"Core Image",
            "value":1,
            "reasons":[
               "Some reason",
               "Reason 2"
            ]
         },
         {
            "name":"Deployment",
            "value":1,
            "reasons":[
               "no servers"
            ]
         },
         {
            "name":"Hardware",
            "value":1,
            "reasons":[
               "hardware too expensive"
            ]
         },
         {
            "name":"Security",
            "value":1,
            "reasons":[
               "plain text password"
            ]
         },
         {
            "name":"Application",
            "value":0.405,
            "reasons":[
               "332 out of 1600 apps are not package for W10"
            ]
         }
      ],
      "type":"Software"
   },
   {
      "guid":"54db81ab47b3187eceaef46f",
      "modified":0,
      "created":0,
      "name":"Windows 10.1",
      "criteria":[
         {
            "name":"Supportability",
            "value":1,
            "reasons":[
               "we do not know the tech"
            ]
         },
         {
            "name":"Core Image",
            "value":1,
            "reasons":[
               "Some reason",
               "Reason 2"
            ]
         },
         {
            "name":"Deployment",
            "value":1,
            "reasons":[
               "no servers"
            ]
         },
         {
            "name":"Hardware",
            "value":1,
            "reasons":[
               "hardware too expensive"
            ]
         },
         {
            "name":"Security",
            "value":1,
            "reasons":[
               "plain text password"
            ]
         },
         {
            "name":"Application",
            "value":0.85,
            "reasons":[
               "332 out of 1600 apps are not package for W10"
            ]
         }
      ],
      "type":"Software"
   }
]

如何在表格中使用ng-repeat以便我将表格作为

<th>Criteria</th>
<th>iOs</th>
<th>windows</th>..(basically json.name)

和我的桌子身体

<tr>
<td>Supportability (json.criteria[0].name)</td>
<td>1</td>(value for iOs)
<td>1</td>(value for Windows10.1)
<td>...................and so on.
</tr>

<tr><td>Core Image</td>
<td>1</td> ......

</tr>

Answer 1

正如其他评论所说，这种数据结构不适合表格。这种方式也不是最佳的，但如果你真的想要，你可以使用div来管理它。但是你必须对相同的数据使用多次ng重复（不好）。

<div class="section">
  <div class="header">&nbsp;</div>
  <div class="body" ng-repeat="y in mydata[0].criteria">
      {{y.name}}
  </div>
</div>
<div class="section" ng-repeat="x in mydata">
  <div class="header">{{x.name}}</div>
  <div class="body" ng-repeat="y in x.criteria">
      {{y.value}}
  </div>
</div>

plunkr：http://plnkr.co/edit/FpsTe36oYh5t6a0XI2Dc?p=preview

我再说一遍，你最好重组数据以适应你的输出。

Ng-重复角js

1 个答案: