Is there a way to do ng-repeat that spans more than one array using AngularJS?

Question

I have the following that goes 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 them 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

Of course you can use javascript concat() to concat() arrays and then use the results for your repetition.

In this way:

 <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 ng-repeat index

Fiddle here

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

Although you can combine your arrays in one with something like undescorejs, rather than doing it.

Answer 3

try it

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