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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
前台js调用后台方法示例
Dec 02 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
vue绑定class的三种方法
Dec 24 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
smarty section简介与用法分析
2008/10/03 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php使用正则验证中文
2016/04/06 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
python比较两个列表是否相等的方法
2015/07/28 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
python保留小数位的三种实现方法
2020/01/07 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
管理失职检讨书
2014/02/12 职场文书
情况说明书格式范文
2014/05/06 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
岳麓书院导游词
2015/02/03 职场文书
护士先进个人总结
2015/02/13 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
golang 语言中错误处理机制
2021/08/30 Golang