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＆amp;分别为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>

Answer 2

sessionLength数组中有重复值，因此您需要使用track by $index来避免“不允许在转发器中重复”错误。这应该有用......

       <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+'] track by $index" ng-if="sessionLength['5+']">
                    {{v}}
                </td>
                <td ng-repeat="(k,v) in sessionLength['3-5'] track by $index" ng-if="sessionLength['3-5']">
                    {{v}}
                </td>
                <td ng-repeat="(k,v) in sessionLength['1-3'] track by $index" ng-if="sessionLength['1-3']">
                    {{v}}
                </td>
                <td ng-repeat="(k,v) in sessionLength['0.5'] track by $index" ng-if="sessionLength['0.5']">
                    {{v}}
                </td>
                <td ng-repeat="(k,v) in sessionLength['<30'] track by $index" ng-if="sessionLength['<30']">
                    {{v}}
                </td>
            </tr>

Answer 3

@Pankaj Parkar以下是我最后使用的内容。哪个工作正常。

<tbody ng-repeat="(sessionKey, session) in compAppsData">
                                        <tr ng-repeat="(key, value) in session track by $index">
                                          <td>{{key}}</td>
                                          <td ng-repeat="v in value track by $index" style="text-align:center"> {{ v}}</td>
                                        </tr>
                                    </tbody>

动态数字键上的角度ng-repeat不起作用

3 个答案: