在Angular中,与其他表单中的控件元素相比,select控件的功能要强大很多,它可以借组“ng-options”指令属性,将数组、对象类型的数据添加到< option >元素中,同时还能在添加数据时进行分组显示。select控件绑定数据的形式有下列集中。
(1)绑定简单的数组数据
这种方法是最为常用,也是最为简单,只需要在控制器中添加一个数组,代码如下:
$scope.data = ['A','B','C','D'];
然后,在页面< select >标签添加“ng-model”指令属性值,采用“…for…in…”格式将数组与< select >控件绑定,代码如下:
<select ng-model="a" ng-options="txt for in data">
<option value="">--请选择--</option>
</select>
上述代码中,必须添加“ng-model”,否则,无法绑定select的选中值。
(2)绑定简单对象数据
除了绑定数组数据之外,还可以绑定对象数据,实现过程也非常简单,采用“…as…for…in…”。
$scope.data = [
{id:"1",name:'a'},
{id:"2",name:'b'},
{id:"3",name:'c'},
{id:"4",name:'d'}
];
然后在页面对select元素进行数据绑定
<select ng-model="a" ng-options="txt.id as txt.name for txt in data">
<option value="">--请选择--</option>
</select>
在上述代码中,在设置< select >元素的“ng-options”属性值时,“as”前面部分对应元素的value值,用于选中时获取,“as”后面的部分对应元素的text值,用于直接显示。
(3)以分组的形式绑定对象数据
除直接绑定对象数据外,还可以将对象中的数据进行分组绑定显示。实现的方式也很简单,只要先在控制器中添加一个有分组成员的对象数据,代码如下:
$scope.data = [
{id:'1',name:'A',key:'大写'},
{id:'2',name:'B',key:'大写'},
{id:'3',name:'C',key:'大写'},
{id:'4',name:'D',key:'大写'},
{id:'5',name:'a',key:'小写'},
{id:'6',name:'b',key:'小写'},
{id:'7',name:'c',key:'小写'},
{id:'8',name:'d',key:'小写'}
]
在上面的数据可以看出,数据中以”key”作为分组的属性,那么在页面中< select >控件的”ng-options”,属性采用”…as…group by…for…in…”格式,可以实现对象按”key”成员分组绑定并显示的功能,代码如下:
<select ng-model="a" ng-options="txt.id as txt.name group by txt.key for txt in data">
<option value="">--请选择--</option>
</select>
经过上述的< select >控件的绑定数据的介绍,相信大家对Angular中使用< select >控件有一个初步的认识。以下是一个比较完整的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-repeat</title>
<script src="../js/angular.min.js"></script>
<style>
body{
font-size:12px;
}
div{
margin:8px 0;
}
</style>
</head>
<body ng-app="app" ng-controller="myCtr">
<form name="myForm">
<div>
学制:
<select ng-model="a" ng-options="v.id as v.name for v in a_data" ng-change = a_change(a)>
<option value="">--请选择--</option>
</select>
<span>{{a_show}}</span>
</div>
<div>
班级
<select ng-model="b" ng-options="v.id as v.name group by v.grade for v in b_data" ng-change = b_change(b)>
<option value="">--请选择--</option>
</select>
<span>{{b_show}}</span>
</div>
</form>
<script>
var app = angular.module('app',[]);
app.controller('myCtr',['$scope',function($scope){
$scope.a_data = [
{id:'1000',name:'小学'},
{id:'2000',name:'初中'},
{id:'3000',name:'高中'}
];
$scope.b_data = [
{id:'1001',name:'(1)班',grade:'小学'},
{id:'1002',name:'(2)班',grade:'小学'},
{id:'1003',name:'(3)班',grade:'小学'},
{id:'2001',name:'(1)班',grade:'初中'},
{id:'2002',name:'(2)班',grade:'初中'},
{id:'2003',name:'(3)班',grade:'初中'},
{id:'3001',name:'(1)班',grade:'高中'},
{id:'3002',name:'(2)班',grade:'高中'},
{id:'3003',name:'(3)班',grade:'高中'}
];
$scope.a = "";
$scope.b = "";
$scope.a_change = function(a){
$scope.a_show = "您选择的是:" + a;
};
$scope.b_change = function(b){
$scope.b_show = "您选择的是:" + b;
};
}])
</script>
</body>
</html>
*在例子我们可以发现一个很有趣的问题,就是select绑定的model是 a和b,同时可以在绑定事件的时候,将自己绑定的model直接作为参数传进去函数中,估计这是一个作用域的问题。