迭代两个数组的内容并一起显示答案

【问题标题】：Iterate contents of two array and display together迭代两个数组的内容并一起显示
【发布时间】：2020-01-20 14:13:42
【问题描述】：

我对 Angular 非常陌生，并且正在使用数组设计一个可能的解决方案。但是，我找不到最好的方法。在其他编码语言中，它很容易根据索引迭代和显示 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>

输出：

水果：苹果

颜色：红色

颜色：绿色

颜色：黄色

水果：葡萄

颜色：红色

颜色：绿色

颜色：黄色

水果：香蕉

颜色：红色

颜色：绿色

颜色：黄色

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

按照您的示例，您可以通过ng-repeat="(key, value) in $ctrl.fruit" 或使用ng-repeat 的$index 属性访问索引。 Docs

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

哦，明白了。谢谢