AngularJS: API: ng/directive/select

select

- directive in module ng

带有angular数据绑定功能的HTMLSELECT元素。

`ngOptions`

ngOptions属性可用于动态生成元素列表，当对菜单中的一项被选中时，数组元素或对象属性作为被选中的选项绑定到模型的ngModel指令。

注意： ngModel通过引用比较，而非值比较。这在使用对象数组绑定时很重要。参见示例in this jsfiddle.

此外，设置为空字符串值的单个硬编码的元素可以嵌套到

参数

参数	类型	详述
ngModel	string	声明用于数据绑定的Angular表达式。
name (可选)	string	发布到表单下的控件的属性名称。
required (可选)	string	控件只有输入值才被认为有效。
ngRequired (可选)	string	当ngRequired表达式等于true时，添加`required`属性和`required`验证约束到元素上。使用`ngRequired`替换`required`，当你想数据绑定到`required`属性上时。
ngOptions (可选)	comprehension_expression	下列形式之一：当数据源为数组： `label``for``value``in``array` `select``as``label``for``value``in``array` `label``groupby``group``for``value``in``array` `select``as``label``groupby``group``for``value``in``array``trackby``trackexpr` 当数据源为对象： `label``for(``key``,``value``)in``Object` `select``as``label``for(``key``,``value``)in``Object` `label``groupby``group``for(``key``,``value``)in``Object` `select``as``label``groupby``group``for(``key``,``value``)in``Object` 这里: `array`/`Object`:用于进行迭代的结果为一个数组或对象的表达式。 `value`: 局部变量，迭代期间指向`array`中的每个条目，或`Object`的每个属性值。 `key`: 局部变量，迭代期间指向`Object`的属性名称。 `label`: 这个表达式的结果作为元素的标签。`表达式`通常指向`value`变量 (如`value.propertyName`)。 `select`:这个表达式的结果会绑定到父

示例

index.html

ng-controller="ExampleController">ng-repeat="color in colors">Name:ng-model="color.name">[hrefng-click="colors.splice($index, 1)">X][hrefng-click="colors.push({})">add]Color (null not allowed):ng-model="myColor"ng-options="color.name for color in colors">
Color (null allowed):class="nullable">ng-model="myColor"ng-options="color.name for color in colors">value="">-- choose color --
Color grouped by shade:ng-model="myColor"ng-options="color.name group by color.shade for color in colors">
Selecthrefng-click="myColor = { name:'not in list', shade: 'other' }">bogus.
Currently selected: {{ {selected_color:myColor} }}style="border:solid1pxblack;height:20px"ng-style="{'background-color':myColor.name}">

protractor.js

it('should check ng-options',Function(){expect(element(by.binding('{selected_color:myColor}')).getText()).toMatch('red');element.all(by.model('myColor')).first().click();element.all(by.css('select[ng-model="myColor"] option')).first().click();expect(element(by.binding('{selected_color:myColor}')).getText()).toMatch('black');element(by.css('.nullable select[ng-model="myColor"]')).click();element.all(by.css('.nullable select[ng-model="myColor"] option')).first().click();expect(element(by.binding('{selected_color:myColor}')).getText()).toMatch('null');});

前の記事：次の記事：