Javascript Angularjs和自动生成的选择标记

我有一点问题，我有一个API为我提供产品，每个产品都有多个选项，如下所示：

[
    {
        "name": "Product 1",
        "options": [
            {
                "name": "Product 1 all options",
                "price": 2000
            }, {
                "name": "Product 1 no option",
                "price": 1400
            }
        ]
    }, {
        "name": "Product 2",
        "options": [
            {
                "name": "Product 2 all options",
                "price": 3000
            }, {
                "name": "Product 2 no option",
                "price": 1900
            }
        ]
    }];

现在我提出如下：

<tbody>
    <tr ng-repeat="product in products">
        <td>{{ product.name }}</td>
        <td>
            <select class="form-control">
                <option
                    ng-repeat="option in product.options"
                    data-price="{{ option.price }}">{{ option.name }}</option>
            </select>
        </td>
        <td>HERE I WANT TO DISPLAY THE SELECTED option.price +/- VAT</td>
    </tr>
</tbody>

{{product.name}
{{option.name}
这里我想显示所选选项。价格+/-增值税

现在您可能注意到，

标记本身位于

ng repeat

中，因此它可以无限重复，具体取决于我拥有的产品数量；我无法将

选择

绑定到任何

ng型号

，因为我可能会意外地将许多

绑定到同一型号

---

现在，对于每个

，我必须在第三个

中显示与所选选项对应的价格+/-增值税。有没有办法让angularjs做到这一点？我不想使用简单的JS/jQuery。

您可以使用product变量作为select的模型。当该值更改时，它也将在select外部更新

例如：

app.controller（'MainCtrl'，函数（$scope）{
$scope.products=['a'，'b'，'c'，'d']；
});

{{product}}
除了@toskv，您还可以完全避免使用选项标签

<tr ng-repeat="product in products">
  <td>{{ product.name }}</td>
    <td>
       <select class="form-control" ng-model="product.selectedPrice" ng-options="option.price as option.name for option in product.options track by option.name">
       </select>
    </td>
  <td>{{product.selectedPrice}}</td>
</tr>


{{product.name}
{{product.selectedPrice}}

请参见选择元素中的
使用
ng选项
和
ng型号
。谢谢，我从来没有这样想过：）@Shotgun我也建议使用ng选项指令谢谢，我正在使用此版本：）