[Angularjs]ng-select和ng-options
来源:互联网 发布:长春长影制片厂美工 编辑:程序博客网 时间:2024/05/18 17:59
ng-select
一个例子
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>
0 0
- [Angularjs]ng-select和ng-options
- [Angularjs]ng-select和ng-options
- angularjs: ng-select和ng-options
- Angularjs中ng-select和ng-options的用法详解
- angularjs select ng-model ng-options
- angular select ng-options和ng-repeat
- Angularjs中ng-select和ng-options用法【select联动数据】
- angularjs select 赋值 ng-options配置方式
- angularjs select 赋值 ng-options配置方式
- Angularjs中select 的ng-repeat 和 ng-options 用法和获取选取值
- Angularjs中select 的ng-repeat 和 ng-options 用法和获取选取值
- angularjs select标签 ng-options ng-change学习
- Angularjs ng-options用法
- AngularJs ng-options
- AngularJS 的select 控件的ng-options的使用示例
- AngularJs: ng-options used in the select tag
- 【AngularJS】ng-model-options指令
- AngularJS 之ng-options指令
- Android ViewPager带有提示点的欢迎界面
- 【来日复制粘贴】状态栏随机显示
- BZOJ2302: [HAOI2011]Problem c|动态规划|组合数学
- class A<T> where T:class 这个泛型类中的Where T:class什么意思
- Android应用源码比较不错的新闻客户端
- [Angularjs]ng-select和ng-options
- 人际关系之三纲五常
- Gym 100733A Shitália(三角形面积)
- EasyUI datagrid datetimebox扩展
- linux shell——命令之乐
- 关于C++的模板偏特化和萃取编程技法
- 安装好后 实例启动出现问题
- 机器学习实践 学习笔记3 decision trees
- 网站SEO中的的三个误区ccxtqj