标签：
angular中的select指令必须配合 ng-model 使用，否则无效，不能正常显示。
以下是示例中将要用到的数据对象，控制器中定义如下：
app.controller("demoCtrl",["$scope", function($scope) {
//定义测试数据
$scope.data0 = [{id: 1, name: "男"},
{id: 0, name: "女"}];
$scope.data1 = [{id: 0, name: "篮球", tppe: "球类"},
{id: 1, name: "足球", tppe: "球类"},
{id: 2, name: "溜冰", tppe: "轮滑"},
{id: 3, name: "滑板", tppe: "轮滑"}];
}]);
以下是各个示例的代码展示及说明：
<!-- 场景一 -->
<!-- 说明：简单用法，初始化 gender1 为 0 （number 类型）， 即性别为 女 --> <select ng-init="gender1=0" ng-model="gender1"> <option value="1">男</option> <option value="0">女</option> </select> <!--页面刚加载时打印: i am a girl, 此后不管你选择男或女始终打印：i am a boy --> {{ gender1 ? "i am a boy" : "i am a girl" }}
<!-- 说明：简单用法，初始化 gender2 为 false （boolean 类型）， 即性别为 女 --> <select ng-init="gender2=false" ng-model="gender2"> <option value="true">男</option> <option value="false">女</option> </select> <!--页面刚加载时打印: i am a girl, 此后不管你选择男或女始终打印：i am a boy --> {{ gender2 ? "i am a boy" : "i am a girl" }}
对场景一的说明：
此使用场景下，不管你的ng-model刚开始定义的是什么类型(number or boolean or string...)，只要你操作了下拉框并改变了选项, ng-model的数据类型都会变成 string 类型。上面的 gender1 开始定义的是 number 类型， gender2 开始定义的是 boolean 类型。当你操作了下拉框，改变其选项时，两者都变成了 string 。 即 0 -> "0" , false -> "false"。 这也就是之后不管你选 男 还是 女， 始终打印“ i am a boy ”的原因：
因为在js中，对 字符串 作 布尔运算 时，只要不是空字符串，全都为 true。所以 gender1 和 gender2 始终为 真(true), 因此始终打印：i am a boy。如果在你的控制器中有类似这样的操作时，你可能就掉坑里了:
//当选择 女 时，做些操作
if(!gender1) { do something... }
我就这么被坑过...
<!-- 场景二 -->
<!-- 说明：通过指令ng-options生成选项 --> <select ng-model="gender3" ng-options="g.name for g in data0"> </select> <!-- 页面刚加载时不打印任何东西（未初始化），之后根据你的选择打印 {id: 1, name: "男"} 或 {id: 0, name: "女"} --> {{gender3}}
对场景二的说明：
ng-options="g.name for g in data0"
通过 g 遍历数组data0中的每个元素, 并将其每个元素的name属性作为<option>的text, 而整个元素作为<option>的value。
相当于：<option value="g">g.name</option> 。因此，当你选择 男 或 女 时， $scope.gender3 = {id: 1, name: "男"} 或 {id: 0, name: "女"}, 它得到的是数组元素
<!-- 场景三 -->
<!-- 说明：通过指令ng-options生成选项 --> <select ng-model="gender4" ng-options="g.id as g.name for g in data0"> </select> <!-- 页面刚加载时不打印任何东西(未初始化)，之后根据你的选择打印 0 或 1 --> {{gender4}}
对场景三的说明：
ng-options="g.id as g.name for g in data0"
通过 g 遍历数组data0中的每个元素, 并将其每个元素的name属性作为<option>的text，每个元素的id属性作为<option>的value。
相当于：<option value="g.id">g.name</option> 。因此，当你选择 男 或 女 时， $scope.gender4 = 1 或 0, 它得到的是数组元素的id值
<!-- 场景四 -->
<!-- 说明：通过指令ng-options生成选项，并手动添加 "=请选择=" 选项 --> <select ng-model="gender5" ng-options="g.id as g.name for g in data0"> <option value="">=请选择=</option> </select>
对场景四的说明：
我们经常会碰到要手动添加选项的情况。当在使用了ng-options自动生成选项时，如果要手动添加类似于 "=请选择=" 这样的初始选项，那么：
此 option 必须设置 value 属性，并且 value 属性的值必须为空，即 value=""
<!-- 场景五 -->
<!-- 说明：通过指令ng-options生成选项，并实现分组 --> <select ng-model="hobby1" ng-options="g.id as g.name group by g.type for g in data1"> </select>
效果图：
对场景五的说明：
ng-options="g.id as g.name group by g.type for g in data1"
通过 g 遍历数组data1中的每个元素, 并将其每个元素的name属性作为<option>的text，每个元素的id属性作为<option>的value。并根据每个元素的type属性进行分组。
group by 相当于创建<optgroup>，面type属性则当作<optgroup>的label， 相当于：
<optgroup label="g.type">
<option value ="g.id">g.name</option>
</optgroup>
<!-- 场景六 -->
<!-- 说明：通过指令ng-options生成选项，并且允许 表达式 --> <select ng-model="hobby2" ng-options="g.id as (‘我爱‘+g.name) for g in data1"> </select>
效果图：
对场景六的说明：
此示例说明在 ng-options 中是允许 表达式 的。我们甚至可以改变option的返回值，如：ng-options="(g.id>1) as (‘我爱‘+g.name) for g in data1"
将返回 boolean 类型的值，不再是 g.id 的值。
<!-- 场景七 -->
<!-- 说明：通过指令ng-options生成选项，并排序 --> <select ng-model="hobby3" ng-options="g.id as g.name for g in data1 | orderBy:‘name‘"> </select>
对场景七的说明：
此示例说明 ng-options 支持排序。
标签：
原文地址：http://www.cnblogs.com/similar/p/5001293.html
