AngularJs的ng-options - 澄清?

时间:2014-02-16 15:31:24

标签: javascript angularjs

我有这个小demo

基本上,它是带有此数据的select元素:

 address: {
            select: {
                code: "0",
                name: "Select proof of address"
            },
            letter: {
                code: "1",
                name: "Letter"
            },
            photograph: {
                code: "2",
                name: "Photograph"
            }
        }

这是select

 <select ng-model="current.addressCode" ng-options="value.code as value.name for (key,value) in student.address"</select>

问题:

问题#1 - 查看Ng doc -

enter image description here

所以,我试着比较

value.code as value.name for (key,value) in student.address

到第二行(我觉得最合适)

select as label for (key , value) in object

这里发生了什么?

value.code转到select ???

Html select元素的option标记为valuetext内部标记为:

<option value="volvo">Volvo</option>那就是全部。

他们的文档中含义是什么?

问题#2

如何将myne的这个对象绑定到常规的value,text选择?

(我希望codevaluenametext

目前我在dom中看不到任何价值:

enter image description here

2 个答案:

答案 0 :(得分:1)

您理解示例二符合您的需求是正确的,即:

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 ng-model="current.addressCode" ng-options="value.code as value.name for
        (key,value) in student.address"></select>

value.code值存储在current.addressCode中,而在选择下拉列表中,您应该看到value.name作为选项标签。

编辑:那么,回答你的问题:
问题1
在这种情况下,“select”只是一个变量名称 - 一个占位符,如果您可能希望文档解释它(它在下面进一步说明)。在您的代码中,使用而不是select的变量的值是绑定到select的ng-model的值(在您的情况下,value.code)

问题2
正如你所提到的那样:

<select ng-model="current.addressCode" ng-options="value.code as value.name for
            (key,value) in student.address"></select>

这将自动为您提供必要的值,文本选择标记。选择选项后,与该选项相关联的value.code会存储在current.addressCode

答案 1 :(得分:0)

http://jsfiddle.net/7FL76/1/

怎么样:

它需要简单的改变:

 address: [
            {
                code: "0",
                name: "Select proof of address"
            },
            {
                code: "1",
                name: "Letter"
            },
            {
                code: "2",
                name: "Photograph"
            }
        ]

原因是您的与嵌套的名称(例如,字母 - 字母)相同,因此json有点多余。

结果你会看到。

值为代码,文字为名称