2015-02-12 73 views
0

我从服务器的json作为伍重复角JS

[ 
    { 
     "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-重复表,使我得到的表作为

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

和我的表身as

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

+2

我在样本中看不到任何角码?你的数据有太多的图层让我们为你写一个解决方案.....告诉我们你试过的东西没有给你预期的结果。 – Claies 2015-02-12 01:52:49

+0

此外,您的数据似乎没有在同一结构中进行格式化,从而无法在列之间进行重复工作;您的数据似乎被格式化为跨行重复。 – Claies 2015-02-12 01:56:00

+0

看起来你想要对数据进行一些调整。这不在角度可以做的范围之内,所以你需要自己在JS中转换数据,这样你就可以将正确的结构传递给'ng-repeat'。 – 2015-02-12 02:02:53

回答

0

正如其他评论所说,这个数据结构不适合表格。这种方式也不是最优的,但如果你真的想要,你可以使用div来管理它。但是你必须在相同的数据上使用多个ng-repeat(不好)。

<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

我再说一遍,你最好还是重组你的数据,以满足您的输出。

+0

谢谢马利克。那么我应该如何重新格式化它以便我可以使用ng-repeat来实现表格? – 2015-02-12 03:23:25