使用对象表示法获取所选 ng-option 的标签

Question

给定一个对象：

obj = {
  foo: 1,
  bar: 2
}

我使用对象数据源表示法创建了一个 ng-option：

<select ng-model="selection" ng-options="key for (key, value) in obj"></select>

此时，用户将看到一个包含值 foo 和 bar 的下拉列表。当他们 select 一个选项时， selection 的值分别更改为 1 或 2。

但是我怎样才能返回并找出当前 selected key/label 是什么？

Answer 1

要在您的语句中确定和比较 键的值，您只需将 select 子句添加到您的 ng-options 表达式。

<select ng-model="selection" ng-options="key as key for (key, value) in obj"></select>

这会将 selection 设置为 foo 或 bar 而不是 1 或 2，您可以从那里做出决定。

来自 Angular 文档

select as label for (key , value) in object

select: The result of this expression will be bound to the model of the parent <select> element. If not specified, select expression will default to value.

更新:

为了同时查看键和值，您可以创建一个新对象作为您的 select。看看这个 Plunkr

<select ng-model="selection" ng-options="{key:key, value:value} as key for (key, value) in obj"></select>

<span>{{selection.key}}</span>
<span>{{selection.value}}</span>

使用对象表示法获取所选 ng-option 的标签

Get the label of selected ng-option using object notation

javascript

angularjs

label

html-select

ng-options