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

Question

这似乎困扰了很多人(包括我).

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

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

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

当resultOptions例如为:

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

它应该(并且可能是)设置选项值最简单的事情,但到目前为止我还没有得到它.

Answer 1

请参阅ngOptions

ngOptions(可选) - { 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)成对解构的.

Answer 2

值属性如何获得其值:

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

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

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

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

Answer 3

我也有这个问题.我无法在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 }
        ];

我从博文中了解到如何使用Angular.JS ng-options&track by设置选择元素的初始选定值.

观看视频.这是一个很好的课程:)

Answer 4

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

然后,预期值将通过表格以正确的名称发送.

Answer 5

要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属性指定了单独的数据.

Answer 6

看起来使用起来ng-options很复杂(可能令人沮丧),但实际上我们遇到了架构问题.

AngularJS充当动态HTML + JavaScript应用程序的MVC框架.虽然它的(V)iew组件确实提供HTML"模板化",但其主要目的是通过控制器将用户操作连接到模型中的更改.因此,在AngularJS中工作的适当抽象级别是select元素将模型中的值设置为查询中的值.

• 查询行如何呈现给用户的是(V)电子情报的关注和ng-options提供的for支配选项元素的内容应该是什么样的关键字即 p.text for p in resultOptions.
• 如何将选定的行呈现给服务器是(M)odel的关注点.因此,ng-options提供as关键字以指定为模型提供的值,如k as v for (k,v) in objects.

这个问题的正确解决方案当然是体系结构,并涉及重构HTML,以便(M)odel在需要时执行服务器通信(而不是用户提交表单).

如果MVC HTML页面对于手头的问题不必要过度设计:那么只使用AngularJS的(V)iew组件的HTML生成部分.在这种情况下,遵循用于生成元素的相同模式,例如<li />'s下的<ul />'s并在选项元素上放置ng-repeat:

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

作为kludge,可以随时将select元素的name属性移动到隐藏的input元素:

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

Answer 7

你可以这样做:

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

- 更新

经过一些更新后,用户frm.adiputra的解决方案要好得多.码:

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

Answer 8

今天我一直在努力解决这个问题.我通读了AngularJS文档,本文和其他帖子以及他们引导的一些博客.他们都帮助我克服了更精细的细节,但最终这似乎是一个令人困惑的话题.主要是因为有许多语法上的细微差别ng-options.

最后,对我来说,更少的是它.

给定范围配置如下:

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

这就是我获得所需结果所需的全部内容:

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>   

注意我没用track by.使用track by所选项目将始终返回与FirmnessID匹配的对象,而不是FirmnessID本身.这现在符合我的标准,即它应该返回一个数值而不是对象,并用于ng-options通过不为生成的每个选项创建新范围来获得它提供的性能改进.

另外,我所需要的空白第一行,所以简单地加入<option>到<select>元件.

这是一个展示我作品的Plunkr.

Answer 9

如果您希望值与文本相同,则可以使用数组执行此操作,而不是使用新的"跟踪依据"功能:

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

注意标准语法之间的区别,它将使值成为Object/Array的键,因此数组为0,1,2等:

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

k作为v变为v为v.

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

在'k as v'语句中,k将是值,v将是显示给用户的文本选项.我认为'追踪'是凌乱和矫枉过正的.

Answer 10

根据我的说法,这最适合所有场景:

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

您可以在哪里使用模型来绑定数据.您将获得对象将包含的值以及基于您的方案的默认选择.

Answer 11

这就是我解决这个问题的方法.我跟踪了select by value并在JavaScript代码中将所选的item属性设置为模型.

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vm是我的控制器和从服务中检索到的控制器中的国家/地区{CountryId =1, Code = 'USA', CountryName='United States of America'}.

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

Answer 12

该ng-options指令不对<options>数组的元素设置value属性:

使用limit.value as limit.text for limit in limits方式:

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

请参阅Stack Overflow问题AngularJS ng-options不呈现值.

Answer 13

可以使用 ng-options 实现 select 标签绑定到 value 和 display 成员

使用此数据源时

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

您可以使用下面的将您的选择标签绑定到值和名称

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

效果很好

Answer 14

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>