AngularJS: API: ng/directive/select

select

- directive in module ng

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

`ngOptions`

ngOptions 属性可用于动态生成<option>元素列表，当对<select>元素使用数组，或者是 ngOptions可解析的表达式计算得到的对象。

当<select>菜单中的一项被选中时，数组元素或对象属性作为被选中的选项绑定到模型的 ngModel指令。

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

此外，设置为空字符串值的单个硬编码的<option>元素可以嵌套到 <select>元素中。这个元素将表现为null或 "not selected"选项。参见下面的示例演示。

注意： ngOptions 为<option>提供了一个迭代器工厂用于替代 ngRepeat，在你想让 select模型绑定到非字符串值时。这是因为一个选项元素只能被绑定到一个字符串值上。

指令信息

这个指令执行优先级为0.

用法

作为元素使用:

<select
  ng-model=""
  [name=""]
  [required=""]
  [ng-required=""]
  [ng-options=""]>
...
</select>

参数

参数	类型	详述
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` `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` / `Object`:用于进行迭代的结果为一个数组或对象的表达式。 `value`: 局部变量，迭代期间指向`array`中的每个条目，或`Object`的每个属性值。 `key`: 局部变量，迭代期间指向`Object`的属性名称。 `label`: 这个表达式的结果作为`<option>`元素的标签。`表达式`通常指向`value` 变量 (如 `value.propertyName`)。 `select`:这个表达式的结果会绑定到父`<select>`元素的模型上。如果未指定，`select`表达式默认为`value`。 `group`: 这个表达式的结果会被用于使用`<optgroup>` DOM 元素分组选项。 `trackexpr`: 应用于对象数组。表达式的结果被用唯一标识数组中的对象。 `trackexpr`通常指向`value`变量(如`value.propertyName`)。

示例

index.html

<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>

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');});