如何在 AngularJS 的 ng-options 中设置 value 属性?

IT技术 javascript angularjs
2021-01-24 04:43:06

这似乎困扰着很多人(包括我)。

ng-options在 AngularJS 中使用指令填充<select>标签的选项时,我无法弄清楚如何设置选项的值。这方面的文档真的不清楚 - 至少对于像我这样的傻瓜来说是这样。

我可以像这样轻松地设置选项的文本:

ng-options="select p.text for p in resultOptions"

resultOptions例如为:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

设置选项值应该是(并且可能是)最简单的事情,但到目前为止我只是不明白。

6个回答

查看ngOptions

ngOptions(optional) – { comprehension_expression=} – 采用以下形式之一:

对于数组数据源label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr 对于对象数据源: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

在你的情况下,它应该是

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

更新

随着 AngularJS 的更新,现在可以使用表达式设置元素value属性的实际值selecttrack by

<select ng-options="obj.text for obj in array track by obj.value">
</select>

如何记住这些丑陋的东西

对于所有很难记住这种语法形式的人:我同意这不是最简单或最漂亮的语法。这种语法是 Python 列表推导式的扩展版本,知道它可以帮助我很容易地记住语法。它是这样的:

python代码:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

这实际上与上面列出的第一个语法相同。然而,<select>我们通常需要区分代码中的实际值和<select>元素中显示的文本(标签)

就像,我们需要person.id在代码中,但我们不想向id用户显示我们想显示它的名字。同样,我们person.name对代码中的 不感兴趣as关键字来标记东西。所以它变成了这样:

person.id as person.name for person in people

或者,person.id我们不需要person实例/引用本身。见下文:

person as person.name for person in people

对于 JavaScript 对象,同样的方法也适用。请记住,对象中的项目是(key, value)成对解构的

为什么这个答案在没有提供答案的情况下有这么多的赞成票?frm.adiputra 的回答是正确的。
2021-03-18 04:43:06
奇怪,但我在 Chrome 和 FF 中得到 <option value="0">1st</option>, <option value="1">2nd</option>。
2021-03-21 04:43:06
这不是错误,这是一个功能。angularjs 在内部处理 ngOptions 和 ngModel,这样它就允许您使用任何类型的对象作为选项中的值,而不仅仅是字符串。您永远不应该尝试以相反的方式获取 select 的值,您只需要使用附加到 select 元素的 ngModel 即可。
2021-03-23 04:43:06
您的示例未填充选项的 value 属性。它定义了将存储在 <select> 元素模型中的内容。obj.value 视为 obj.textobj.text 的区别
2021-04-08 04:43:06
我不敢苟同。在内部,select 指令可以轻松地使用自己的不可见模型来跟踪选择了哪个选项。即使它没有在内部跟踪模型值,它也至少可以呈现选项,并在前面加上并选择空选项(如果您将模型设置为不在选项集中的值,它现在会这样做) . 显示选项的唯一依赖是选项本身——POLA 原则在这里适用。
2021-04-09 04:43:06

值属性如何获取其值:

  • 使用数组作为数据源时,每次迭代时为数组元素的索引;
  • 当使用对象作为数据源时,它将是每次迭代中的属性名称。

所以在你的情况下它应该是:

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>
这不会设置值。值默认为数字。但你实际上不能指定一个“值”..可笑..
2021-03-17 04:43:06
这是唯一对我有用的解决方案。多么令人讨厌的头痛。
2021-03-24 04:43:06
+1 用于解释 Angular 如何设置选项元素的 value 属性。
2021-03-30 04:43:06
@Trip,如果您“检查”选择选项,您将看到数字,但如果您查看模型中的绑定值,则在这种情况下,该值是“k”值。这很混乱。blesh 有一个plunk在这个答案中显示了这一点:stackoverflow.com/questions/13047923/... plnkr.co/edit/vJOljg?p=preview
2021-04-04 04:43:06
这应该包含在 angular 文档中,简短而准确。+1
2021-04-06 04:43:06

我也有这个问题。我无法在 ng-options 中设置我的值。生成的每个选项都设置为 0, 1, ..., n。

为了使它正确,我在我的 ng-options 中做了这样的事情:

HTML:

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

我使用“track by”来设置我所有的值room.price

(这个例子很糟糕:因为如果有多个相同的价格,代码就会失败。所以一定要使用不同的值。)

JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

我从博客文章How to set the initial selected value of a select element using Angular.JS ng-options & track by中学到了它

观看视频。这是一堂不错的课:)

这完美地工作。最重要的是,它允许使用包含 <select> 的 datalist 元素,以便 datalist 可以通过它们的值引用选项。谢谢@布鲁诺戈麦斯
2021-03-18 04:43:06
这是ng-options 与选项框的值匹配数组/对象最合适的答案如果有奖励兑换系统,我会为您节省10000积分来自 angular 团队的最奇怪的语法。
2021-03-22 04:43:06
我希望房价永远不会一样,因为那样就坏了。
2021-03-22 04:43:06
这是唯一对我有用的解决方案。谢谢。
2021-03-29 04:43:06
谢谢!这让我郁闷了好久!
2021-03-30 04:43:06

如果你想改变你的option元素的值,因为表单最终会被提交到服务器,而不是这样做,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

你可以这样做:

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

然后将通过表单以正确的名称发送预期值。

我想补充一点,而不是使用<input type="hidden" name="text" value="{{ text }}" />,我会使用ng-value. 所以:<input type="hidden" name="text" ng-value="{{ text }}" />
2021-03-17 04:43:06
为了澄清我的情况,我没有使用 json post 通过 Angular 提交表单——而是我通常使用 http post 提交表单,因此覆盖 Angular 在 <options> 标签中放置的值允许我提交正确的value(谢谢!)。我不需要在隐藏输入中使用 ng-value,而是需要将 value 标签设置为原始帖子注释。
2021-04-07 04:43:06

my_hero使用普通表单提交向服务器发送调用的自定义值

JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

服务器将接收ironsuper作为 的值my_hero

这类似于@neemzy 的答案,但为value属性指定了单独的数据