目录搜索
文字
分享

AngularJS: API: ng/directive/select

select

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

用法

  • 作为元素使用:

    1

    2

    3

    4

    5

    6

    7

    8

    <code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:navy;"><select</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      </span><span style="box-sizing:border-box;color:teal;">ng-model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      [</span><span style="box-sizing:border-box;color:teal;">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

      [</span><span style="box-sizing:border-box;color:teal;">required</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

      [</span><span style="box-sizing:border-box;color:teal;">ng-required</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

      [</span><span style="box-sizing:border-box;color:teal;">ng-options</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    ...

    </span><span style="box-sizing:border-box;color:navy;"></select></span></code>

参数

参数 类型 详述
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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:navy;"><script></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

angular</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">module</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'selectExample'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">[])</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">controller</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'ExampleController'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">[</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'$scope'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">Function</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">(</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">$scope</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">)</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">{</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    $scope</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">colors </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">[</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">{</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'black'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> shade</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'dark'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">},</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">{</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'white'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> shade</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'light'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">},</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">{</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'red'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> shade</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'dark'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">},</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">{</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'blue'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> shade</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'dark'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">},</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">{</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">name</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'yellow'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">,</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> shade</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'light'</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">}</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">];</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    $scope</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">myColor </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> $scope</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">colors</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">[</span><span style="box-sizing:border-box;color:rgb(68, 85, 136);">2</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">];</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(153, 153, 136);">// red</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">}]);

</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"></script>

</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"><div</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-controller</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"ExampleController"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><ul></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    </span><span style="box-sizing:border-box;color:navy;"><li</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-repeat</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"color in colors"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      Name: </span><span style="box-sizing:border-box;color:navy;"><input</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"color.name"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      [</span><span style="box-sizing:border-box;color:navy;"><a</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">href</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-click</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"colors.splice($index, 1)"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">X</span><span style="box-sizing:border-box;color:navy;"></a></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

    </span><span style="box-sizing:border-box;color:navy;"></li></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    </span><span style="box-sizing:border-box;color:navy;"><li></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      [</span><span style="box-sizing:border-box;color:navy;"><a</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">href</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-click</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"colors.push({})"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">add</span><span style="box-sizing:border-box;color:navy;"></a></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">]

    </span><span style="box-sizing:border-box;color:navy;"></li></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"></ul></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><hr/></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  Color (null not allowed):

  </span><span style="box-sizing:border-box;color:navy;"><select</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myColor"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-options</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"color.name for color in colors"</span><span style="box-sizing:border-box;color:navy;">></select><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

 

  Color (null allowed):

  </span><span style="box-sizing:border-box;color:navy;"><span</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">  </span><span style="box-sizing:border-box;color:teal;">class</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"nullable"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    </span><span style="box-sizing:border-box;color:navy;"><select</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myColor"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-options</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"color.name for color in colors"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      </span><span style="box-sizing:border-box;color:navy;"><option</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">value</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">-- choose color --</span><span style="box-sizing:border-box;color:navy;"></option></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    </span><span style="box-sizing:border-box;color:navy;"></select></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"></span><br/></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

 

  Color grouped by shade:

  </span><span style="box-sizing:border-box;color:navy;"><select</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myColor"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-options</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"color.name group by color.shade for color in colors"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"></select><br/></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

 

 

  Select </span><span style="box-sizing:border-box;color:navy;"><a</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">href</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-click</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"myColor = { name:'not in list', shade: 'other' }"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">bogus</span><span style="box-sizing:border-box;color:navy;"></a></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">.</span><span style="box-sizing:border-box;color:navy;"><br></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><hr/></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  Currently selected: {{ {selected_color:myColor}  }}

  </span><span style="box-sizing:border-box;color:navy;"><div</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">style</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">border</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">solid </span><span style="box-sizing:border-box;color:rgb(68, 85, 136);">1px</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> black</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">;</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">height</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(68, 85, 136);">20px</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

       </span><span style="box-sizing:border-box;color:teal;">ng-style</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"{'background-color':myColor.name}"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"></div>

</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"></div></span></code>

protractor.js

1

2

3

4

5

6

7

8

<code style="box-sizing: border-box; font-size: inherit; padding: 0px; color: inherit; background-color: transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;"><span style="box-sizing: border-box;">it</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'should check ng-options'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">Function</span><span style="box-sizing: border-box;">()</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">binding</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'{selected_color:myColor}'</span><span style="box-sizing: border-box;">)).</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toMatch</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'red'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  element</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">all</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">model</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'myColor'</span><span style="box-sizing: border-box;">)).</span><span style="box-sizing: border-box;">first</span><span style="box-sizing: border-box;">().</span><span style="box-sizing: border-box;">click</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">

  element</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">all</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">css</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'select[ng-model="myColor"] option'</span><span style="box-sizing: border-box;">)).</span><span style="box-sizing: border-box;">first</span><span style="box-sizing: border-box;">().</span><span style="box-sizing: border-box;">click</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">binding</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'{selected_color:myColor}'</span><span style="box-sizing: border-box;">)).</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toMatch</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'black'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">

  element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">css</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'.nullable select[ng-model="myColor"]'</span><span style="box-sizing: border-box;">)).</span><span style="box-sizing: border-box;">click</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">

  element</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">all</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">css</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'.nullable select[ng-model="myColor"] option'</span><span style="box-sizing: border-box;">)).</span><span style="box-sizing: border-box;">first</span><span style="box-sizing: border-box;">().</span><span style="box-sizing: border-box;">click</span><span style="box-sizing: border-box;">();</span><span style="box-sizing: border-box;">

  expect</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">element</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box;">by</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">binding</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'{selected_color:myColor}'</span><span style="box-sizing: border-box;">)).</span><span style="box-sizing: border-box;">getText</span><span style="box-sizing: border-box;">()).</span><span style="box-sizing: border-box;">toMatch</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'null'</span><span style="box-sizing: border-box;">);</span><span style="box-sizing: border-box;">});</span></code>