javascript - AngularJS 'ngoptions如何设置值属性?

  显示原文与译文双语对照的内容

这似乎困扰了很多人( 包括我) 。 当使用在 AngluarJS ng-options 指令来填充一个 <select> 标记我没找到具体来设置进度条的进度值的选项中的一个选项。 这个文档的文档非常不清楚- 至少对于像我这样的simpleton 。

我可以轻松设置选项的文本,如下所示:


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

resultOptions 为例如:


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

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

时间:

http://docs.angularjs.org/api/ng.directive:select

使用以下其中一种 forms, 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>

更新

track by expression, Angular 上更新,它现在可能少的人的来设置实际值的value 属性 select element.


<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

对于JS对象,同样的方法同样适用,只需记住对象中的项目是用 (key, value) 对分解的。

值属性如何获取其值:

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

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


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

<select ng-options="k as v for (k,v) in obj"></select>

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

为了使它正确,我在ng-options中做了类似的事情。something 。

html :


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

我使用"音轨按"来设置我的所有值

( 这个例子很糟糕:如果有更多的价格相等,代码会失败) 。 所以一定要有diferents值

JSON:


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

我在这里学习:http://gurustop.net/blog/1 2014/01/28/common-problems-and-solutions-when-using-select-elements-with-angular-js-ng-options-initial-selection/

Wacth视频,它是一个不错的类:

如果你想要更改 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 }}"/>

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

要使用普通表单向服务器发送一个名为 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}}"/>

服务器将接收 iron 或者 super 作为 my_hero的值。

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

看来这里 ng-options 是复杂( 可能令人沮丧) 来使用,但在现实中我们所得到的是一个架构问题。

AngularJS作为一个动态HTML+JS应用程序的MVC框架。 虽然它的( V ) iew组件提供了 HTML"模板化,",但它的主要目的是通过一个控制器来连接用户操作,从而改变模型中的变化。 因此适当的抽象级别,以便从这个列在AngularJS工作,那是一个选择模型中的元素设置一个值将一个值从一个查询

  • 一行是显示给用户( V ) 要关心的事情是如何将查询一列的标题和 ng-options 提供了 for 关键字来表示什么的内容选项元素应 i.e 。 p.text for p in resultOptions
  • 如何将选中的行呈现给服务器是( M ) odel的关注点,因此 ng-options 提供 as 关键字来指定向模型提供的值 k as v for (k,v) in objects

正确的解这问题会被建筑在本质上是和涉及重构你的HTML,以使( M ) odel执行服务器通信需要时 ( 而不是用户提交表单) 。

在 hand, 如果一个 MVC HTML页面,无需刮的over-engineering problem: 然后仅使用HTML生成一部分( V ) angularjs的一列的标题组件。 在这种情况下,遵循相同的模式,它是用于生成一个选项element,元素上放置一个如 <li/><ul/>的下和。


<select name="value">
 <option ng-repeat="value in Model.Values" value="{{value.value}}">
 {{value.text}}
 </option>
</select>

作为一个组装组件,你总是可以将select元素的名称属性移动到一个隐藏的输入元素:


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

你可以这样做:


<select ng-model="model">
 <option value="">Select</option>
 <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

--更新

经过一些更新后,frm.adiputra的解决方案会更好: 如何设置 angularjs ng-options中的值属性? 代码:


obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

这就是我解决这个问题的方法。 跟踪by按值select并将选中的项目属性设置为我的javascript中的模型。

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">
在这里输入代码

国家= [{CountryId =1, Code ='USA', CountryName='United States of America'},{CountryId =2,代码='可以',countryname='加拿大'} ]

虚拟机是我的控制器,从服务检索的国家和地区是 {CountryId =1,代码='美国',countryname='美国美国'}

当我从选择下拉列表中选择另一个国家,并用"保存"发布我的网页时,我得到了正确的国家地区。

如果你想要的值与文本相同,你可以使用数组来代替使用新的'音轨按'特性:


<select ng-options="v as v for (k,v) in Array/Obj"></select>

注意标准语法之间的差异,这将使值成为对象/数组的键,因此是数组的0,1,2 等等:


<select ng-options"k as v for (k,v) in Array/Obj"></select>

作为v 成为 k v 为v 。

我发现这只是基于常识的常识。 ( k,v ) 是将数组/对象分割为键值对的实际语句。

在'k 作为v'语句中,k 是值,而v 是显示给用户的文本选项。 我认为'音轨按'是混乱和多余的。

ng-options 指令不为数组的<options> 元素设置值属性:

使用 limit.value as limit.text for limit in limits 意思是:

<option> 标签设置为 limit.text
limit.value 值保存到选择的ng-model

AngularJS ng-options不显示值

...