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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
python处理文本文件并生成指定格式的文件
2014/07/31 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python学生管理系统学习笔记
2019/03/19 Python
Python有参函数使用代码实例
2020/01/06 Python
python让函数不返回结果的方法
2020/06/22 Python
python实现猜拳游戏项目
2020/11/30 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
华为慧通面试题
2012/09/11 面试题
乡镇保密工作责任书
2014/07/28 职场文书
敬老月活动总结
2014/08/28 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书