javascript - ng-repeat如何把两组数据循环放入一组结构中？

Question

我现在有这样两组数据

var a = [ {
    "dicId" : 112
}, {
    "dicId" : 113
} , {
    "dicId" : 114,
}];

var b = [ {
    "name" : "语文"
}, {
    "name" : "数学"
} , {
    "name" : "英语"
}];

我现在想生成这样的dom结构

<ul>
    <li>
        <p>112</p>
        <span>语文</span>
    </li>
    <li>
        <p>113</p>
        <span>数学</span>
    </li>
    <li>
        <p>114</p>
        <span>英语</span>
    </li>
</ul>

应该如何用angular去实现？

Answer 1

定義一個新數組，然後循環你這個a和b 把裡面的值都丟到新數組裡面去。不懂的可以加我qq1010503593

Answer 2

在使用 ng-repeat 的时候是可以获取到 index 的，然后你直接通过 index 去获取另外一个数组的对应元素就好啦。

<ul>
    <li ng-repeat="item in a">
        <p ng-bind="item.dicId"></p>
        <span ng-bind="b[$index].name"></span>
    </li>
</ul>

Answer 3

<p ng-repeat="row in a track by $index">
    <p ng-model="a[$index]"></p>
    <span ng-model="b[$index]"></span>
</p>

Answer 4

这样吧：

var a = [ {
    "dicId" : 112
}, {
    "dicId" : 113
} , {
    "dicId" : 114,
}];

var b = [ {
    "name" : "语文"
}, {
    "name" : "数学"
} , {
    "name" : "英语"
}];

$scope.items = a.map((item, index) => angular.extend({}, item, b[index]));

<ul>
    <li ng-repeat="item in items">
        <p>{{ item.dicId }}</p>
        <span>{{ item.name }}</span>
    </li>
</ul>