Question

如何实现两个ng-repeat的输出，使它们混合在一起。

当前输出：

john
maria
peter
red
blue
green

期望的输出：

john
red
maria
blue
peter
green

：

<body ng-controller="MainCtrl">
    <div ng-repeat='item in names'>{{item.name}}</div>
    <div ng-repeat='item in colors'>{{item.color}}</div>
 </body>

但是，我不想使用ng-repeat-start和ng-repeat-end，因为我正在使用交错动画。

PLUNKR

非常感谢

编辑：假设两个数据都来自不同来源，因此它们不在同一个对象中。

Answer 1

您可以使用$ index来显示数字：

<div ng-repeat='item in names'>
      {{item.name}}
      <br>
      {{numbers[$index].number}}
</div>

但是，我建议将名称和数字放在一个对象中，因为这样做会更好。

Answer 2

如果可以根据您的数据进行迭代，我可能会通过迭代底层对象来处理这个问题。例如：

update my_db.my_table
    set b = b + CONSTANT
    where TIMESTAMP(`Date`, `Time`) > '2015-02-06' and
          TIMESTAMP(`Date`, `Time`) < '2015-08-01 10:45:00';

Answer 3

您应该将名称和数字组合到一个对象中。然后你可以简单地做：

<div ng-repeat="combo in combinations">
    <div>{{combo.name}}</div>
    <div>{{combo.number}}</div>
</div>

我会看一下here给出的答案。

Answer 4

如果我们有2 ng重复，如 -

<table>
    <tr>
        <td class="comp-names" ng-repeat="compNames in $ctrl.data.compNames track by $index">{{compNames}}</td>
    </tr>
    <tr>
        <td class="comp-desc" ng-repeat="compDesc in $ctrl.data.compDesc track by $index">{{compDesc}}</td>
    </tr>
</table>

首先在控制器中映射2个数组 -

ctrl.combined = ctrl.data.compNames.map(function(value, index){
    return { name: value, desc: ctrl.data.compDesc[index] };
});

然后遍历生成的数组 -

<tr ng-repeat="comp in $ctrl.combined track by $index">
    <td class="comp-names">{{comp.name}}</td>
    <td class="comp-desc">{{comp.desc}}</td>
</tr>

有关详细的解决方案和讨论，请参阅以下链接 -

To display results of 2 ng-repeats alternately

AngularJS - 混合ng-repeat，一个接一个

4 个答案: