AngularJS 使用ngOption实现下拉列表
2016-01-18 16:54
555 查看
阅读目录
下拉列表的简单使用
复杂对象,自定义列表名称
实现下拉列表的分组
按照id进行标识
参考
最近使用到了ngOption实现下拉选择列表,由于需要实现分组等功能,百度了下没有太好的文章,就百度到一篇英文的帖子,按照其中的代码很顺利的搞定了。
本篇根据文中代码,详细讲述下如何实现下拉列表
回到顶部
一个是ng-model用于获取选定的值;
另一个是ng-options用于确定下拉列表的元素数组。
上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定,然后列表中的选项是activities中的每一个值。数据如下:
运行结果如:
View Code
回到顶部
下拉列表的简单使用
复杂对象,自定义列表名称
实现下拉列表的分组
按照id进行标识
参考
最近使用到了ngOption实现下拉选择列表,由于需要实现分组等功能,百度了下没有太好的文章,就百度到一篇英文的帖子,按照其中的代码很顺利的搞定了。
本篇根据文中代码,详细讲述下如何实现下拉列表
回到顶部
下拉列表的简单使用
ng-option指令使用很简单,只需要绑定两个属性:一个是ng-model用于获取选定的值;
另一个是ng-options用于确定下拉列表的元素数组。
<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>
上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定,然后列表中的选项是activities中的每一个值。数据如下:
$scope.engineer = { name: "Dani", currentActivity: "Fixing bugs" }; $scope.activities = [ "Writing code", "Testing code", "Fixing bugs", "Dancing" ];
运行结果如:
<html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div ng-controller="EngineeringController" class="container"> <div class="col-md-12"> current is: {{ engineer.currentActivityId}} </div> <div class="col-md-4"> <label for="name">Choose a new activity:</label> <select ng-model = "engineer.currentActivityId" class="form-control" ng-options = "a.id as a.name group by a.type for a in activities" > </select > </div> </div> <script type="text/javascript"> var myAppModule = angular.module("myApp",[]); myAppModule.controller("EngineeringController",["$scope",function($scope){ $scope.engineer = { currentActivityId: 3 }; $scope.activities = [ { id: 1, type: "Work" , name: "Writing code" }, { id: 2, type: "Work" , name: "Testing code" }, { id: 3, type: "Work" , name: "Fixing bugs" }, { id: 4, type: "Play" , name: "Dancing" } ]; }]); </script> </body> </html>
View Code
回到顶部
参考
Using ngOptions in AngularJS:http://odetocode.com/blogs/scott/archive/2013/06/19/using-ngoptions-in-angularjs.aspx相关文章推荐
- 模拟linux 双网卡双ip,实现multipath多路径连接存储
- OpenWRT的ipk编译方法
- vmware虚拟机上linux操作系统进行tty1~tty6切换方法和具体步骤
- MTTR是什么?或者说为什么别给婴儿喝白兰地
- centos 7 网卡配置详解
- 授权普通用户Linux crontab定时任务
- expr用法
- 网页前端开发经常会逛到的网站
- linux系统下ubuntu重启apache服务命令
- Exchange 2013 POP3被inactive无法连接
- Log4j.properties配置
- 网站发布后在IIS上定时执行任务
- Linux 内核配置机制(make menuconfig、Kconfig、makefile)讲解
- Linux 内核配置机制(make menuconfig、Kconfig、makefile)讲解
- linux添加开机启动脚本
- Linux 内核配置机制(make menuconfig、Kconfig、makefile)讲解
- Xshell 连接CentOS服务器解密
- Tomcat发布文件
- linux下last与lastb命令详解
- Nginx查看nginx.conf路径