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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
JS常用表单验证方法总结
May 22 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
leaflet的开发入门教程
Nov 17 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
小程序云开发之用户注册登录
May 18 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
js实现3D旋转效果
Aug 18 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 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
COM in PHP (winows only)
2006/10/09 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
JSON格式的键盘编码对照表
2015/01/29 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
python实现的简单猜数字游戏
2015/04/04 Python
Python的函数的一些高阶特性
2015/04/27 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python sys.argv[]用法实例详解
2018/05/25 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Java中实现多态的机制
2015/08/09 面试题
大学生自荐书范文
2013/12/10 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
财产公证书
2014/04/10 职场文书
IT工程师岗位职责
2014/07/04 职场文书
财务部会计岗位职责
2015/02/03 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang