javascript - AngularJS：在不修改 ng-model 的情况下获取选择标签

Question

我目前遇到一个看起来很简单的问题：

控制器 ：

$scope.fruits = [{
    name: 'AP',
    label: 'Apple'
  }, {
    name: 'BA',
    label: 'Bananas'
  }];   

HTML 代码：

<select
    ng-model="meal.fruit"
    ng-options="fruit.name as fruit.label for fruit in fruits">
</select>

<p>Fruit : {{meal.fruit}}</p>

问题是，这显示

Fruit : BA

代替

Fruit : Bananas

我无法将 ng-option 修改为“fruit asfruit.label”，因为我需要我的模型“meal.fruit”为“AP”或“BA”（因为它是 Jackson 反序列化的 java 枚举，它需要枚举值）。

JSFiddle

总之，我需要 meal.fruit 为“BA”，并且我还希望能够在其他地方显示选定的值“香蕉”。

我能做些什么 ？

编辑 ：

Maxim Shoustin找到了对我有用的解决方案，（非常感谢！）：

我修改了我的代码以具有以下内容：

http://jsfiddle.net/2qfSB/77/

然后我修改了提交方法以添加以下内容：

$scope.meal.fruit = $scope.meal.fruit.name;

Answer 1

只需更改ng-options：

ng-options="fruit.label as fruit.label for fruit in fruits">

固定演示：Fiddle

作为旁注

您可以通过使用默认设置第一个元素以避免空组合ng-init：

<select
        ng-model="meal.fruit"
        ng-options="fruit.label as fruit.label for fruit in fruits"
        ng-init="meal.fruit = fruits[0].label"
    >

演示：Fiddle