Is there a way I can do a ng-repeat that covers more than one array with AngularJS?

Question

I have the following that loops through xa and prints the qs.a.text values:

<div data-ng-repeat="a in xa">
   <div data-ng-bind-html="a.text"></div>
</div>

<div data-ng-repeat="b in xb">
   <div data-ng-bind-html="b.text"></div>
</div>

Is there a way that I could combine these something like this:

<div data-ng-repeat="a in xa and xb">
   <div data-ng-bind-html="a.text"></div>
   <div data-ng-bind-html="b.text"></div>
</div>

Note that xa and xb are arrays that always contain exactly the same number of elements.

Answer 1

Sure, you can use javascript's concat() to concatenate the arrays and then use the results for your repeat.

As such:

<div data-ng-repeat="item in combined = xa.concat(xb)">
   <div data-ng-bind-html="item.text"></div>
</div>

Answer 2

you can use $index. it represents the current index of the ng-repeat

Fiddle Here

<div ng-repeat="item in arrA" class="container">
    <div>{{arrA[$index].text}}</div>
    <div>{{arrB[$index].text}}</div>
</div>

Though you may want to combine your arrays in to one with something like undescorejs instead of doing that.

Answer 3

Try this

<div data-ng-repeat="a in xa">
   <div data-ng-bind-html="a.text"></div>
   <div data-ng-bind-html="xb[$index].text"></div>
</div>