Question

在Angular 1.2.11中，给出一个控制器：

$scope.produce = { 'apples' : [{ 'variety' : 'granny smith', 'price': 2.00}] }

带

的视图

<select ng-model='fruits'>
  <option value="0">More Fruits...</option>
  <option ng-repeat="p.apple for p in produce" value="p">{{ p.variety }}</option>
</select>

如何将'p'绑定到value属性？如果我按上面的方式尝试，模型被绑定为JSON字符串，而不是模型本身（就像我能够使用ng-options一样）。

我现在通过使用ng-change函数来解决这个问题，该函数使用绑定到fruits的值作为$scope.produce中的查找，但这似乎是一种解决方法而不是解决方案。

编辑：抱歉，我不太清楚这一点：我需要能够将1+选项硬编码到选择列表中，因此使用ng-options不是解决方案。

以下是一些有助于说明我的问题的小提琴：

** Using ng-options ** ng-options允许使用一个元素来创建用作标签的默认选项。这有两个问题：如果我尝试将<option>用于其预期目的，我就无法在select中添加第二个选项。另一方面，如果我只是尝试添加一个<option>元素，它将被放置在<select>列表的顶部。不好。

** Using ng-repeat ** 我无法将模型绑定到value元素的<option>属性。相反，该值是字符串化JSON，不可绑定。

Answer 1

您需要使用ng-options：

<select ng-model='fruits' ng-options="thisFruit.variety in apples">
</select>

如果您需要选择默认选项（“更多水果”选项），则需要在数据到达转发器之前将其添加到数据中，并将模型$ scope.fruits = 0设置为默认情况下选择该选项。

如何将模型绑定到选项的值

1 个答案: