©
이 문서에서는 PHP 중국어 웹사이트 매뉴얼 풀어 주다
带有angular数据绑定功能的HTML SELECT 元素。
ngOptionsngOptions 属性可用于动态生成<option>元素列表，当对<select>元素使用数组，或者是 ngOptions可解析的表达式计算得到的对象。
当<select>菜单中的一项被选中时，数组元素或对象属性作为被选中的选项绑定到模型的 ngModel指令。
ngModel通过引用比较，而非值比较。这在使用对象数组 绑定时很重要。参见示例in this jsfiddle.此外，设置为空字符串值的单个硬编码的<option>元素可以嵌套到 <select>元素中。这个元素将表现为null或 "not selected"选项。参见下面的示例演示。
ngOptions 为<option>提供了一个迭代器工厂用于替代 ngRepeat，在你想让 select模型绑定到非字符串值时。这是因为一个选项元素只能被绑定到一个字符串值上。<select
ng-model=""
[name=""]
[required=""]
[ng-required=""]
[ng-options=""]>
...
</select>| 参数 | 类型 | 详述 |
|---|---|---|
| ngModel | string | 声明用于数据绑定的Angular表达式。 |
| name (可选)
|
string | 发布到表单下的控件的属性名称。 |
| required
(可选)
|
string | 控件只有输入值才被认为有效。 |
| ngRequired
(可选)
|
string | 当ngRequired表达式等于true时，添加 |
| ngOptions
(可选)
|
comprehension_expression |
下列形式之一：
这里:
|
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', Function($scope) {
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark'},
{name:'yellow', shade:'light'}
];
$scope.myColor = $scope.colors[2]; // red
}]);
</script>
<div ng-controller="ExampleController">
<ul>
<li ng-repeat="color in colors">
Name: <input ng-model="color.name">
[<a href ng-click="colors.splice($index, 1)">X</a>]
</li>
<li>
[<a href ng-click="colors.push({})">add</a>]
</li>
</ul>
<hr/>
Color (null not allowed):
<select ng-model="myColor" ng-options="color.name for color in colors"></select><br>
Color (null allowed):
<span class="nullable">
<select ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>
</span><br/>
Color grouped by shade:
<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
</select><br/>
Select <a href ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</a>.<br>
<hr/>
Currently selected: {{ {selected_color:myColor} }}
<div style="border:solid 1px black; height:20px"
ng-style="{'background-color':myColor.name}">
</div>
</div>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');});