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 相关文章推荐
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 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实现Mysql读写分离
2013/06/28 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
node后端服务保活的实现
2019/11/10 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python让列表倒序输出的实例
2018/06/25 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
如何进行有效的自我评价
2013/09/27 职场文书
消防器材管理制度
2014/01/28 职场文书
卫生标语大全
2014/06/21 职场文书
中学清明节活动总结
2014/07/04 职场文书
保密工作承诺书
2014/08/29 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang