[Angularjs]ng-select和ng-options
2015-08-28 09:20
627 查看
ng-select
ng-select用来将数据同HTML的<select>标签进行绑定。这个指令可以和ng-model以及ng-options指令一起使用,构建精细且表现良好的动态表单。
ng-options的值可以是一个内涵表达式(comprehension expression),其实这只是一种有趣的说法,简单来说就是它可以接收一个数组或者对象,并对她们进行循环,将内部的内容提供给select标签内部的选项。它可以是一下两种形式。
1、数组作为数据源
用数组中的值做标签。
用数组中的值作为选中的标签。
用数组中的值做标签组。
用数组中的值作为选中的标签组。
2、对象作为数据源
用对象的键-值(key-value)做标签。
用对象的键-值作为选中的标签。
用对象的键-值作为标签组。
用对象的键-值作为选中的标签组。
一个例子
查看一下dom
你会发现,上面的option中的text都是对象,这也很容易理解,因为cities数组的每一项都是一个对象,绑定的时候将以对象直接绑定上。那么我们如何只让它显示name属性呢?
直接点出属性即可。再查看下dom数。
值已经显示出来,但是并不是太完美,因为第一项默认选中的竟然没有值,那么接下来我们指定默认值。
加上这句代码,并不能解决问题,我们仍需修改ng-options
我们再查看下dom
ng-options有以下格式的语法
for array data sources:
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr
for object data sources:
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in ob
在看一个分组的例子,为cities数组加上group属性,并按照group分组:
结果
双向绑定
这里已经指定了ng-model,获取选中的值,也非常方便了。
ng-select用来将数据同HTML的<select>标签进行绑定。这个指令可以和ng-model以及ng-options指令一起使用,构建精细且表现良好的动态表单。
ng-options的值可以是一个内涵表达式(comprehension expression),其实这只是一种有趣的说法,简单来说就是它可以接收一个数组或者对象,并对她们进行循环,将内部的内容提供给select标签内部的选项。它可以是一下两种形式。
1、数组作为数据源
用数组中的值做标签。
用数组中的值作为选中的标签。
用数组中的值做标签组。
用数组中的值作为选中的标签组。
2、对象作为数据源
用对象的键-值(key-value)做标签。
用对象的键-值作为选中的标签。
用对象的键-值作为标签组。
用对象的键-值作为选中的标签组。
一个例子
<!DOCTYPE html> <html xmlns="" ng-app="app"> <head> <title>select</title> <script src="JS/"></script> <script> var app = angular.module('app', []); app.controller('selectController', function ($scope) { $scope.mycity = '北京'; $scope.Cities = [{ id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '广州' }]; }); </script> </head> <body> <div ng-controller="selectController"> <select ng-model="mycity" ng-options="city for city in Cities"></select> </div> </body> </html>
查看一下dom
你会发现,上面的option中的text都是对象,这也很容易理解,因为cities数组的每一项都是一个对象,绑定的时候将以对象直接绑定上。那么我们如何只让它显示name属性呢?
<div ng-controller="selectController"> <select ng-model="mycity" ng-options="city.name for city in Cities"></select> </div>
直接点出属性即可。再查看下dom数。
值已经显示出来,但是并不是太完美,因为第一项默认选中的竟然没有值,那么接下来我们指定默认值。
$scope.mycity = '北京';
加上这句代码,并不能解决问题,我们仍需修改ng-options
<select ng-model="mycity" ng-options="city.name as city.name for city in Cities"></select>
<select ng-model="mycity" ng-options="k as v for (k,v)in obj"></select> // k作为option 的 value字段,绑定到ng-model上,v代表显示的选项内容
我们再查看下dom
ng-options有以下格式的语法
for array data sources:
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr
for object data sources:
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in ob
在看一个分组的例子,为cities数组加上group属性,并按照group分组:
<!DOCTYPE html> <html xmlns="" ng-app="app"> <head> <title>select</title> <script src="JS/"></script> <script> var app = angular.module('app', []); app.controller('selectController', function ($scope) { $scope.mycity = '北京'; $scope.Cities = [{ id: 1, name: '北京', group: '中国' }, { id: 2, name: '上海', group: '中国' }, { id: 3, name: '广州',group:'中国' }]; }); </script> </head> <body> <div ng-controller="selectController"> <select ng-model="mycity" ng-options="city.name as city.name group by city.group for city in Cities"></select> </div> </body> </html>
结果
双向绑定
这里已经指定了ng-model,获取选中的值,也非常方便了。
<!DOCTYPE html> <html xmlns="" ng-app="app"> <head> <title>select</title> <script src="JS/"></script> <script> var app = angular.module('app', []); app.controller('selectController', function ($scope) { $scope.mycity = '北京'; $scope.Cities = [{ id: 1, name: '北京', group: '中国' }, { id: 2, name: '上海', group: '中国' }, { id: 3, name: '广州', group: '中国' }]; }); </script> </head> <body> <div ng-controller="selectController"> <select ng-model="mycity" ng-options="city.name as city.name group by city.group for city in Cities"></select> <h1>欢迎来到{{mycity}}</h1> </div> </body> </html>
相关文章推荐
- Angular Js文件上传之form-data
- angularjs ui-route
- angular form-data文件上传
- angularjs指令系统
- Angular新手容易碰到的坑
- AngularJS 应用身份认证的技巧
- angularjs 点滴汇总
- ngGrid checkbox应用
- ionic中点击图片看大图的实现
- JavaScript调用AngularJS的函数/$scope/变量
- angularjs 去往其他页面,目标页面controller中的方法无法自动加载
- angularjs 切换页面传参数
- angularjs 页面返回 参数传递
- angularJS学习资源最全汇总
- angularjs+requirejs整合
- angularjs自动加载和手动加载
- AngularJS的加载执行过程
- AngularJS 学习笔记值post传值
- 【转】Angularjs Controller 间通信机制
- asp.net mvc中用angularJs写的增删改查的demo。初学者,求指点。。