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

-1

我怎样才能达到两个ng-repeat的输出，使它们混合在一起。AngularJS - 混合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

非常感谢

编辑：假设，无论是数据来源不同动态的到来，因此，他们不是在一个/同一个对象。

来源

2015-08-20 angular_learner

你可以使用$索引显示，像这样的数字：

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

不过，我会建议把姓名和电话号码在一个对象，这将是更好的做法。

来源

2015-08-20 16:09:58 sq1020

更改我的问题，因为我不需要数字。这两个数据可能会动态传入，因此它们不在一个对象中。 –

答案仍然适用。只需使用颜色[$ index] .color而不是数字[$ index] .number – sq1020

我可能会通过遍历底层对象来处理这个问题，如果给定数据的话可能的话。例如：

people = {[{"name":"name1", "age":"age1"}, {"name":"name2", "age":"age2"}]} 

<body ng-controller="MainCtrl" ng-repeat='person in people'> 
<div>{{person.name}}</div> 
<div>{{person.age}}</div> 
</body>

来源

2015-08-20 16:10:40

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

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

我会看给出的答案here。

来源

2015-08-20 16:13:46 nickflynn

如果我们有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

来源

2018-01-12 21:34:48 manishk

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

回答

相关问题