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 as fruit.label",因为我需要我的模型"meal.fruit"为"AP"或"BA"(因为它是由杰克逊进行的java enum反序列化,它需要枚举值).

的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