AngularJS - mixed ng-repeat, one after another

Question

How can I achieve the output of two ng-repeat so that they are mixed.

Current output:

john
maria
peter
red
blue
green

Desired output:

john
red
maria
blue
peter
green

of this:

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

However, I don't want to use ng-repeat-start and ng-repeat-end as I'm using stagger animation.

PLUNKR

Many thanks

EDIT: hypothetically, both data are coming dynamically from different sources, hence they're not in one/same object.

score 2 · Answer 1 · answered Aug 20 '15 at 16:09

2

You could use $index to show the number like so:

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

However, I would recommend putting the names and numbers in one object as that would be better practice.

answered Aug 20 '15 at 16:09

sq1020

1,000
2
9
15

Changed my question, as I don't need numbers. Both data might be coming in dynamically, hence they're are not in one object. – angular_learner Aug 20 '15 at 16:13
The answer still applies. Just use colors[$index].color instead of numbers[$index].number – sq1020 Aug 20 '15 at 16:16

score 1 · Answer 2 · answered Aug 20 '15 at 16:10

I'd probably handle this by iterating over the underlying objects, if that's possible given your data. For example:

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>

score 1 · Answer 3 · edited May 23 '17 at 10:26

1

You should combine the names and numbers into a single object. Then you could simply do:

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

I would look at the answer given here.

edited May 23 '17 at 10:26

Community

1
1

answered Aug 20 '15 at 16:13

nick

1,880
17
27

manishk · Answer 4 · 2018-01-12T23:47:06.747

If we have 2 ng-repeats like-

<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>

Map the 2 arrays in the controller first-

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

and then iterate over the resulting array-

<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>

For the detailed solution and discussion, please refer the link below-

To display results of 2 ng-repeats alternately

AngularJS - mixed ng-repeat, one after another

4 Answers4