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

【问题标题】：AngularJS : get select label without modifying ng-modelAngularJS：在不修改 ng-model 的情况下获取选择标签
【发布时间】：2013-11-10 08:33:27
【问题描述】：

我目前遇到一个看似简单的问题：

控制器：

$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”，并且我还希望能够在其他地方显示选定的值“Bananas”。

我能做什么？

编辑：

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

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

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

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

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

【问题讨论】：

标签： javascript angularjs enums

【解决方案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

【讨论】：

这并不能解决我的问题，因为现在当我提交表单时，meal.fruit 包含“香蕉”。我需要它包含由杰克逊反序列化的“BA”:(
来自您的示例 <p>Fruit : {{meal.fruit}}</p>。你想要：Fruit : Bananas。所以我失去了你，你能提供更多信息吗？
我知道，这部分现在很好，但我需要 meal.fruit 成为“BA”才能被 Jackson 反序列化
使用您的解决方案，当我提交表单时出现这种错误：org.codehaus.jackson.map.JsonMappingException: No enum const class mypackages.Fruits.Banana
所以你想在 Web Bananas 中显示，但是 meal.fruit 应该是枚举 BA，对吧？