Ng-重復角js

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

我再說一遍，你最好重組數據以適應你的輸出。