javascript - 迭代两个数组的内容并一起显示

Question

我对角度非常陌生，并且正在使用数组设计一个可能的解决方案。但是，我找不到最好的方法。在其他编码语言中，它可以根据索引简单地迭代和显示 2 个数组的值 -

var fruit = [apple,grapes,banana];
var color = [red,green,yellow];
for (var i=0; i<fruit.length;i++)
{ 
    print('Fruit '+fruit[i]);
    print('Color ' +color[i]);
}

输出 ：

水果 苹果

红色

水果葡萄

颜色绿色

果黄色

问题 - 我想拥有类似的功能，但无法通过 angular 来实现。我试过ng-repeat但是无法显示为上面的输出。即迭代两个数组的项目并显示。谢谢

<div ng-repeat="f in fruit" >
    <label <b>${Fruit:}</b></label>
    <div>{{n}}</div>
    <div  ng-repeat="c in color" >
        <label <b>${color:}</b></label>
        <div>{{c}}</div>
    </div>
</div>    

输出 ：

水果：苹果

红色

颜色：绿色

颜色：黄色

水果：葡萄

红色

颜色：绿色

颜色：黄色

水果：香蕉

红色

颜色：绿色

颜色：黄色

Answer 1

而不是两次迭代，使用第一次迭代的索引，即

<div ng-repeat="f in fruit" >
    <label><b>${Fruit:}</b></label>
    <div>{{fruit[$index]}}</div>
    <label><b>${Color:}</b></label>
    <div>{{color[$index]}}</div>
</div>  

Answer 2

您可以使用$index跟踪循环数组中当前偏移量的变量。

<div ng-repeat="f in $ctrl.fruit" >
   <div>{{fruit[$index]}}</div>
   <div>{{color[$index]}}</div>
</div>

Answer 3

按照您的示例，您可以访问索引执行ng-repeat="(key, value) in $ctrl.fruit"或$index使用ng-repeat. 文档

<div ng-repeat="(key, value) in $ctrl.fruit">
  <label><b>Fruit: {{$ctrl.fruit[key]}}</b></label>
  <div>Color: {{$ctrl.color[key]}}</div>
</div>

或者

<div ng-repeat="fruit in $ctrl.fruit">
  <label><b>Fruit: {{$ctrl.fruit[$index]}}</b></label>
  <div>Color: {{$ctrl.color[$index]}}</div>
</div>