angularjs: ng-select和ng-options

angular.js有一个很强大的指令: ng-select 它可以帮助你通过数据模型来创建select元素.它很好的支持了select标签的语法,但是却有点坑.

假设有如下一段json数据:

{

    "myOptions": [

        {

            "id": 106,

            "group": "Group 1",

            "label": "Item 1"

        },

        {

            "id": 107,

            "group": "Group 1",

            "label": "Item 2"

        },

        {

            "id": 110,

            "group": "Group 2",

            "label": "Item 3"

        },

}

$scope.myOptions = data.myOptions;

这段数据很简单: 我有一些分组,每个分组都包含自己的一些选项.如果要直接用这些数据创建select元素是很麻烦的.所以,我把代码重构成下面这样: angularjs会自动进行分组

<select

    ng-model="myOption"

    ng-options="value.id as value.label group by value.group for value in myOptions">

    <option>--</option>

</select>

ng-model的值会指向select元素的当前选中项的value值. ng-options指令会用于填充select下拉选项,它的值还需要深究一下: 我们从右边往左边看会比较容易,首先是: value in myOptions

它表示你要迭代当前作用域下的 myOptions 对象. 迭代时,myOptions对象里的每一项的名字就叫value.

接下来是: group by value.group

它告诉angular.js去创建这个标签:

<optgroup label="value.group">

...

</optgroup>

标签的label属性将会被value的group属性值填充.

最后是: value.id as value.label

value.id将会和模型进行绑定,它的值会被存进ng-model属性里去(也就是option的value值,被选中后就是select标签的value). 如果你没有写value.id as,而是只写了value.label,那么,整个对象会被作为ng-model的值.

value.label就是option元素的选项名.这段代码渲染的结果如下:

<optgroup label="Group 1">

   <option value="0">Item 1</option>

   <option value="1">Item 2</option>

</optgroup>

请再仔细看一下,注意一下options的value属性: 你可能认为它的值应该是数据模型中的id属性值,但事实并非如此(虽然一开始我也这么认为).事实上,它是一个递增的数字,这个数字指向的是模型的索引值(这里的模型就是myOptions数组).不用担心它-当用户选择某一项的时候,正确的id还是会被选中,并且传递到ng-model属性中去.另外,如果你的ng-options表达式里没有value.id部分,那选中项对应的整个对象会成为ng-model的值.

你可以简单的测试一下:

<select 

    ng-change="selectAction()"

    ng-model="myOption"

    ng-options="value.id as value.label group by value.group for value in myOptions">

    <option>--</option>

</select>

当用户选中某一项的时候,ng-change 事件会被触发,你可以把它打印出来:

$scope.selectAction = function() {

    console.log($scope.myOption);

};

最后提一下,一般select标签都会有一个初始状态,比如"--请选择--"这样.这一项是没有value值的.可以直接在select元素里加上一个option标签:

<option value="">-- 请选择 --</option>

这样是不影响数据模型的.如果用户没有选择,或者选择了这个 "--请选择--" 项,那ng-model值就是空.很好理解.

 

ng-options的语法有点反人类.合理的语法设计或许应该是这样的:

foreach value in myOptions use value.label as label use value.id as model group by value.group

 

这里有一个JS fiddle的例子,很好的解释了ng-select指令的用法: http://jsfiddle.net/jm6of9bu/2/

  

本文翻译自:  ANGULAR.JS: NG-SELECT AND NG-OPTIONS 

 

我的demo: https://github.com/OOP-Code-Bunny/angular/tree/master/ng-select

 

(话外...看这篇文章之前,我还真不造还有optgroup这个标签....)