AngularJS:在不修改ng模型的情况下获取选择标签

AngularJS : get select label without modifying ng-model

本文关键字：情况下 获取 选择 标签 模型 ng 修改 AngularJS      更新时间：2023-09-26

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

控制器：

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

网页代码 ：

<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"（因为它是由Jackson反序列化的java枚举，并且它需要Enum值）。

JSFiddle

总之，我需要meal.fruit是"BA"，我还希望能够在其他地方显示所选值"香蕉"。

我能做什么？

编辑：

对

我有用的解决方案是由马克西姆·舒斯汀找到的，（非常感谢！

我修改了我的代码，如下所示：

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

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

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

只需更改ng-options：

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

固定演示：小提琴

作为旁注

您可以使用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"
    >

演示：小提琴

相关文章：