AngularJS学习记录-select标签

来源：互联网发布：漫画软件免费下载编辑：程序博客网时间：2024/05/22 05:03

在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直接作为参数传进去函数中，估计这是一个作用域的问题。

0 0