angularjs - 如何使用angularjs同时绑定3个数组

Question

我尝试使用 ng-repeat value,group1,group2

我越来越

grp1

grp2

美国广播公司

定义

价值1

价值2

我需要

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

使用 $index 获取其他子值

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

这是工作小提琴

Answer 2

您应该使用具有三个不同键的单个数组

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

htlm 看起来像这样

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

您可以编写一个简单的 javascript 来修改 1 个数组中的 3 个数组。希望这可以帮助

Answer 3

使用 ng-repeat 起点和终点来迭代第一个数组，然后用于$index引用其他元素：

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