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 支持排序。