how to bind 3 arrays simultaniously using angularjs

Question

I tried using ng-repeat value,group1,group2

i'm getting

grp1

grp2

abc

def

value1

value2

I need

grp1

  abc

     valu1                           

grp2

      def

          valu1  

Html:
<ul>
<li ng-repeat="heading in group1"> {{heading}} </li> // heading
<li ng-repeat="subheading in group2"> {{subheading }} </li> // sub heading
<li ng-repeat="val in value"> {{val}} </li> // value
</ul>



JavaScript:

                             $scope.group1 = [grp1,grp2];
                             $scope.group2 = [abc,def];
                             $scope.value = [value1,value2];   

Answer 1

use $index to get other sub values

 <div ng-repeat="eachval in group1">
   <p>{{ eachval }}</p>
   <p style="margin-left:15px">{{ group2[$index]}}</p>
   <p style="margin-left:25px">{{ value[$index]}}</p>
 </div>

Here is the WORKING FIDDLE

Answer 2

You should use a single array with three different keys

$scope.arrayList = [{group1Name : 'grp1',group2Name: 'abc', valueName: 'val1'},
{group1Name : 'grp2',group2Name: 'def', valueName: 'val2'}]

htlm would look like this

<li ng-repeat="group in arrayList">
    <div>{{group.group1Name}}</div>
    <div>{{group.group2Name}}</div>
    <div>{{group.valueName}}</div>
</li>

You can write a simple javascript to modify your 3 arrays in 1 array. Hope this helps

Answer 3

Use ng-repeat start and end points to iterate the first array, then use $index to reference the other elements:

<ul>
    <li ng-repeat-start="heading in group1">{{heading}}</li> // heading
    <li> {{group2[$index]}} </li> // sub heading
    <li ng-repeat-end> {{val[$index]}} </li> // value
</ul>