AngularJS使用ng-options指令实现下拉框


Posted in Javascript onAugust 23, 2016

ng-option指令使用很简单,只需要绑定两个属性:

一个是ng-model用于获取选定的值;

另一个是ng-options用于确定下拉列表的元素数组。

1、问题背景

一般情况下,select下都会有option,但是AngularJS中有指令ng-options,就可以实现select下拉框

2、实现源码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>AngularJS之下拉框(方式一)</title> 
<script type="text/javascript" src="../js/angular.min.js" ></script> 
<script> 
var app = angular.module("selApp",[]); 
app.controller("selCon",function($scope){ 
$scope.options = ["第一季度","第二季度","第三季度","第四季度"]; 
}); 
</script> 
</head> 
<body> 
<div ng-app="selApp" ng-controller="selCon"> 
<select ng-model="selectedName" ng-options="x for x in options" style="width: 180px;"> 
</select> 
</div> 
</body> 
</html>

3、问题说明

<select>
<option></option>
</select>

利用指令ng-options,可以省略<option></option>

AngularJS使用ng-options指令实现下拉框

以上所述是小编给大家介绍的AngularJS使用ng-options指令实现下拉框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 #Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 #Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 #Javascript
JavaScript DOM节点操作方法总结
Aug 23 #Javascript
EasyUI创建对话框的两种方式
Aug 23 #Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 #Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 #Javascript
You might like
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP导入导出Excel代码
2015/07/07 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
js计数器代码
2006/11/04 Javascript
重定向实现代码
2006/11/20 Javascript
javascript学习网址备忘
2007/05/29 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
jQuery 表格工具集
2010/04/25 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
JS写滑稽笑脸运动效果
2020/05/28 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
用C++封装MySQL的API的教程
2015/05/06 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python实现简单http服务器
2018/04/12 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Python实现异步IO的示例
2020/11/05 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
SpringRetry重试框架的具体使用
2021/07/25 Java/Android