为 table 中的每一行循环两个数组

Question

我有以下一组json

[
    {
        "drink_name": "Ananascocktail",
        "ingredients": [
            "Ananas",
            "Färskpressad limesaft",
            "Apelsinjuice",
            "Farinsocker",
            "Rom"
        ],
        "alternatives": [
            "",
            "Limesaft",
            "",
            "Socker",
            null
        ]
    },
    {
        "drink_name": "Blå Pilthammer",
        "ingredients": [
            "Blåbärsvodka",
            "Apelsinjuice",
            "Bonaqua Citron"
        ],
        "alternatives": [
            "Vodka",
            "",
            ""
        ]
    }
]

如何遍历 ingredients 和 alternatives 以将每个元素放置在相同 <tr> 上的单独 <td> 中？

我试过在该行上放置一个 ng-repeat，但这会为每个元素创建一个新行。但是，我必须在 <tr> 上使用 ng-repeat，因为我有多个 ingredients/alternatives.

我在 google 上搜索了一个多小时，但找不到完全符合我需要的内容。

有什么建议吗？

Answer 1

我通过执行以下操作解决了它

<tbody>
  <tr ng-repeat="ingredient in json.ingredients">
    <td>{{ingredient}}</td>
      <td ng-repeat="alternative in json.alternatives track by $index" ng-if="$parent.$index === $index">{{alternative}}</td>
  </tr>
</tbody>

我只允许 alternatives 放置一个 <td>，前提是其 $index 与其 $parent 的 $index 相同。为什么解决它超出了我

为 table 中的每一行循环两个数组

Looping over two arrays for each row in a table

javascript

angularjs

angularjs-ng-repeat

nested-loops

ng-repeat