[Angularjs]ng-select和ng-options
写在前面
最近由于项目需要,学了一段时间的angularjs,发现还是比较容易上手的,里面有很多地方,的确震撼了自己。这里就简单的介绍一下angularjs中ng-select和ng-options的用法。
ng-select
ng-select用来将数据同HTML的<select>标签进行绑定。这个指令可以和ng-model以及ng-options指令一起使用,构建精细且表现良好的动态表单。
ng-options的值可以是一个内涵表达式(comprehension expression),其实这只是一种有趣的说法,简单来说就是它可以接收一个数组或者对象,并对她们进行循环,将内部的内容提供给select标签内部的选项。它可以是一下两种形式。
1、数组作为数据源
用数组中的值做标签。
用数组中的值作为选中的标签。
用数组中的值做标签组。
用数组中的值作为选中的标签组。
2、对象作为数据源
用对象的键-值(key-value)做标签。
用对象的键-值作为选中的标签。
用对象的键-值作为标签组。
用对象的键-值作为选中的标签组。
一个例子
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head><title>select</title><script src="JS/angular.min.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>
我们再查看下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="http://www.w3.org/1999/xhtml" ng-app="app"> <head><title>select</title><script src="JS/angular.min.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="http://www.w3.org/1999/xhtml" ng-app="app"> <head><title>select</title><script src="JS/angular.min.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>
总结
刚接触angularjs不久,这是见到的其中的一个例子,顺手总结在这里,也是一种学习。
[Angularjs]ng-select和ng-options相关推荐
- Angularjs 中select回显后重复选项的解决
Angularjs 中select回显后重复选项的解决 (1)Angularjs 中select回显代码,records和categoryValueList都是后台返回的 <!DOCTYPE h ...
- JS 对select动态添加options操作[IEFireFox兼容]
JS 对select动态添加options操作[IE&FireFox兼容] 做一个项目,遇到了要动态调整 select 选项的情况,就baidu了一下,发现了一篇与本文同名的帖子. 但是呢,那 ...
- ng serve 和 ng build 的区别
在这个文档里有介绍. 在开发过程中,你通常会使用 ng serve 命令来借助 webpack-dev-server 在本地内存中构建.监控和提供服务.但是,当你打算部署它时,就必须使用 ng bui ...
- Docker部署NG并设置 NG为静态文件管理器
Docker部署NG并设置 NG为静态文件管理器 1.docker拉取nginx镜像 docker pull nginx 或者docker pull nginx:指定版本号 2.检查拉去下来的镜像 d ...
- angular项目 集成ng zorro 和ng alain
angular项目 集成 ng zorro和ng alain(mock 和acl权限)学习笔记 这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
- angularjs的select 下拉框默认选中某个选项
angularjs的select 下拉框默认选中某个选项 在网上找了很多链接,试验之后都不行.比如常见的: <select class="form-control" ng-m ...
- AngularJs出现错误Error: [ng:areq]
1.没有对应的控制器 2.有控制器但是路径没有配对 转载于:https://www.cnblogs.com/muou2125/p/9543209.html
- select元素的options.add 与 insertbefore的区别
之前写了js checkbox.checked=true在document.body.appendChild(checkbox)前与后赋值,提到如果想改变元素的视觉效果(checkbox.checke ...
- 输入 ng build 或者 ng serve 之后没有任何输出的问题分析
Angular 应用,输入 ng build 命令,没有任何反应: ng version 命令的输出:显示的 CLI 版本号为 12.2.5 然而 package.json 里定义的版本为 ~9.1. ...
- 动态填充html select tag的options
用AMD模块写了一额select.js,用来帮助我动态创建options,并选中其中一个. 调用代码参考例子: var s5 = this.select.create();s5.bind(" ...
最新文章
- Linux系统下查看目录大小
- Spring boot添加员工页面跳转
- 微软发布最新开源Blog平台“Oxite”
- c enum能像java一样吗_不一样的Java Enum
- C++|Qt中QTreeWidget基本操作及完整代码下载
- 《Linux编程》学习笔记 ·004【文件I/O操作】
- 强制 Google.com 域名使用 HTTPS(SSL)
- 6.Swoole WebSocket
- oracle参数文件spfile和pfile
- Excel常用功能(持续更新)
- 查看文件和文件夹大小
- 安卓手机突然很卡_为什么你的安卓手机越用越卡,真是内存不够?终于找到原因了!...
- marvin java_使用Java中的Marvin框架去除轮廓
- AngularJS Protractor
- PyTorch学习率衰减策略:指数衰减(ExponentialLR)、固定步长衰减(StepLR)、多步长衰减(MultiStepLR)、余弦退火衰减(CosineAnnealingLR)
- mac中怎么打摄氏度的圆点
- sgx是什么要开吗_绝了!滑滑梯设计在顶楼,上去一滑不就是直接跳…楼…吗??...
- 计算机领域资讯(一)
- QT中使用fontawesome-webfont.ttf字体库
- 休闲小趣一一数码照片修饰与处理