AngularJS ng-repeat on a tr with more than one object array

Question

I am new to AngularJS. I have a problem with using ng-repeat. I have two objects and i want to iterate like:

first tr with obj1 next tr with obj2 next tr with obj2 next tr with obj2

next tr with obj1 next tr with obj2 next tr with obj2 next tr with obj2

when i use

<tr ng-repeat ="obj in obj1"></tr>

after one iteration I want to repeate on obj 2 so that one tr will be of obj1 and another with obj2.

$scope.OBJ1=[
    {"primaryKey":1,"value":"something1"},
    {"primaryKey":2,"value":"something2"},
    {"primaryKey":3,"value":"something3"},
    {"primaryKey":4,"value":"something4"}
];

$scope.OBJ2=[
    {"primaryKey":1,"dayPart":"dinner"},
    {"primaryKey":1,"dayPart":"lunch"}
];

and expected result :

<tr>something1</tr>
<tr>dinner</tr>
<tr>lunch</tr>

<tr>something2</tr>
<tr>dinner</tr>
<tr>lunch</tr>

<tr>something3</tr>
<tr>dinner</tr>
<tr>lunch</tr>

<tr>something4</tr>
<tr>dinner</tr>
<tr>lunch</tr>

Thanks!!

some code to show ? :)

Ven
– Ven

2013-11-24 01:14:16 +00:00
Commented Nov 24, 2013 at 1:14 — Ven
– Ven, Commented Nov 24, 2013 at 1:14

Michal Charemza · Accepted Answer · 2013-11-24 10:06:12Z

1

Standard nested ng-repeats aren't possible here, as you can't create any wrapping DOM elements. However, what you want is possible with the ng-repeat-start and ng-repeat-directives:

<table>
  <tr ng-repeat-start="obj1 in OBJ1"><td>{{obj1.value}}</td></tr>
  <tr ng-repeat-end ng-repeat="obj2 in OBJ2"><td>{{obj2.dayPart}}</td></tr>
</table>

or see the example plunkr. I have added the td elements to make sure that the output is fairly valid.

answered Nov 24, 2013 at 10:06

Michal Charemza

27.3k15 gold badges114 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

McAbra · Accepted Answer · 2013-11-24 01:35:50Z

1

I think you are not able to do that. It would be easier if you had a parent container for those - from Angular 1.2 (ng-repeat docs) you can use ng-repeat-start/end directives, remember that if you are goin to reorganize your HTML. Also remember about Undersore.js and Lodash.js

answered Nov 24, 2013 at 1:35

McAbra

2,5642 gold badges24 silver badges32 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-repeat on a tr with more than one object array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related