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 相关文章推荐
Opacity.js
Jan 22 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
jquery实现手风琴案例
May 04 jQuery
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
PHP自定义错误用法示例
2016/09/28 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
JS表的模拟方法
2015/02/05 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
python 实时遍历日志文件
2016/04/12 Python
Numpy掩码式数组详解
2018/04/17 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
几个数据库方面的面试题
2016/07/01 面试题
J2EE面试题
2016/03/14 面试题
迟到检讨书1000字
2014/01/15 职场文书
高中生操行评语
2014/04/25 职场文书
委托书如何写
2014/08/30 职场文书
男方婚前保证书
2015/02/28 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
校运会新闻稿
2015/07/17 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
python实现简单的三子棋游戏
2022/04/28 Python