Перебор содержимого двух массивов и отображение вместе

Question

Я очень плохо знаком с angular и разрабатывал возможное решение с использованием массивов.Однако я не мог найти наилучший подход к этому.В других языках кодирования легко повторять и отображать значения 2 массивов в соответствии с индексом для ex -

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]);
}

--output --
Fruit apple
Color red
Fruit grapes
Color green
Fruit yellow

Проблема - я хочу иметь аналогичную функциональность, но не могу сделать это с помощью угловых.Я попытался с 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>    

---output--
Fruit:
apple
Color:
red

Color:
green

Color:
yellow

Fruit:
grapes
Color:
red

Color:
green

Color:
yellow

Fruit:
banana
Color:
red

Color:
green

Color:
yellow

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

Следуя вашему примеру, вы можете получить доступ к индексу, набрав ng-repeat="(key, value) in $ctrl.fruit" или используя $index prop of 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>

Answer 3

Вы можете использовать переменную $index, которая отслеживает текущее смещение в зацикленном массиве.

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