Angular(二)：怎样理解ng-options

首先，在angular中，如果要使用Select输入框，那么一定要采用“ng-options”，因为在与“ng-model”的结合使用中，能自动绑定初始化值，这是“ng-repeat”远远不能比拟的优势，但是相比于“ng-repeat”，“ng-options”的语法实在太难理解了，尤其是有类似于SQL编程经验的人，这里的“as”会让你欲仙欲死。

首先看一个简单的例子，如何将“[2017, 2018, 2019, 2020]”转换为“ng-options”，HTML片段如下：

<!-- years = [2017, 2018, 2019, 2020] -->
<select ng-model="effectYear" ng-options="year for year in years">
</select>

如果要将数组的索引作为“option”的“value”值，那么表达式应该变为：

index as year for (index, year) in years

理解“as”关键字是理解表达式的关键，如果认为“as”是别名，那么无论读多长时间，都无法理解这神秘的表达式，其实“as”类似于二元运算符，“as”之前的值代表“option”的“value”，“as”之后的值代表“option”的“label”，所以上述的表达式还可以继续演进，如下：

//  as前后还可以支持angular表达式，如下
index as year + 1 for (index, year) in years
//  还可以支持angular过滤器
index|toInt as year + 1 for (index, year) in years

as 位置	与option关系
前	表示option的value值
后	表示option的label值
无as	option的value与label值都为数组元素的值

在这里需要注意的是，“ng-options”并没有“ng-repeat”内置的“$index”与“$key”属性，千万不要混淆了。

继续深入进去，怎样用“ng-options”迭代javascript对象？理解了上面的“as”，一切就很容易，假定javascript对象如下：

var weeks = {
    "一" : "星期一",
    "二" : "星期二"
}

要将键值与属性值灌入到“ng-options”中，键值作为“option”的“value”，属性值作为“option”的文本内容，那么表达式应该为：

key as value for(key, value) in weeks

如果数据的格式key、value值位置相反，那么只需要交换“as”前后的表达式即可，如下：

value as key for(key, value) in weeks

这里还需要澄清的是，“key”、“value”都不是关键字，只是一个变量名称而已，另外需要注意阅读表达式的步骤，“for(key, value) in weeks”代表迭代，“value as key”代表确定“option”的“value”与内容。

结论

只要理解了“as”运算符，“ng-options”再复杂的表达式都不是事。