angularjs - 动态数字键上的 Angular ng-repeat 不起作用

Question

我正在尝试循环以下数据 [{"5+":[2,1,3]},{"3-5":[0,1,0]},{"1-3":[1,0,3]},{"0.5":[0,0,0]},{"<30":[0,0,0]}]

使用下面的代码段

<tr ng-repeat='sessionLength in [{"5+":[2,1,3]},{"3-5":[0,1,0]},{"1-3":[1,0,3]},{"0.5":[0,0,0]},{"<30":[0,0,0]}]'>
                                          <td ng-repeat="(key, value) in sessionLength">
                                              {{key}}
                                          </td>
                                          <td ng-repeat="(k,v) in sessionLength['5+']" ng-if="sessionLength['5+']">
                                            {{v}}
                                          </td>
                                          <td ng-repeat="(k,v) in sessionLength['3-5']" ng-if="sessionLength['3-5']">
                                            {{v}}
                                          </td>
                                          <td ng-repeat="(k,v) in sessionLength['1-3']" ng-if="sessionLength['1-3']">
                                            {{v}}
                                          </td>
                                          <td ng-repeat="(k,v) in sessionLength['0.5']" ng-if="sessionLength['5']">
                                            {{v}}
                                          </td>
                                          <td ng-repeat="(k,v) in sessionLength['<30']" ng-if="sessionLength['<30']">
                                            {{v}}
                                          </td>
                                        </tr>

下面是我想要的输出

     App1 App2 App3
5+  : 2    1    3
3-5 : 0    1    0 
1-3 : 1    0    3
0.5 : 0    0    0 
<30 : 0    0    0

需要有关上述循环的一些帮助。我没有得到上述预期结果。

Answer 1

您可以使用三个 ng-repeat，其中一个用于 tbody，然后分别用于 tr 和 td，但对于较大的集合，此方法会对性能产生影响。

在这种情况下，您应该创建自定义过滤器，它将返回格式化数据，从而减少ng-repeat。

标记

<thead>
   <th></th>
   <th>App1</th>
   <th>App2</th>
   <th>App3</th>
</thead>
<tbody ng-repeat="(sessionKey, session) in sessionLength">
    <tr ng-repeat="(key, value) in session track by $index">
      <td>{{key}} :</td>
      <td ng-repeat="v in value"> {{ v}}</td>
    </tr>
</tbody>