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

时间:2015-02-18 00:24:17

标签: javascript angularjs angularjs-ng-repeat nested-loops ng-repeat

我有以下一套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",
            "",
            ""
        ]
    }
]

如何循环ingredientsalternatives以将每个元素放在同一<td>的单独<tr>上?

我已尝试在行上放置ng-repeat,但这会为每个元素创建一个新行。 但是,我必须在ng-repeat上使用<tr>因为我有多种成分/替代品。

我用Google搜索了一个多小时但找不到任何符合我需求的东西。

有什么建议吗?

1 个答案:

答案 0 :(得分: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的{​​{1}}相同,我只允许其$parent。为什么解决它是超出我的