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 自动填写表单的实现方法
Apr 09 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
JS代码优化的8点建议
Feb 04 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入门
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
基于php split()函数的用法详解
2013/06/05 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
javascript 面向对象继承
2009/11/26 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python对html过滤处理的方法
2018/10/21 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
JAVA中的关键字有什么特点
2014/03/07 面试题
优秀大学生推荐信范文
2013/11/28 职场文书
教学器材管理制度
2014/01/26 职场文书
早读课迟到检讨书
2014/09/25 职场文书
会议主持词开场白
2015/05/28 职场文书
毕业感言怎么写
2015/07/31 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
mysql 索引合并的使用
2021/08/30 MySQL
JS的深浅复制详细
2021/10/16 Javascript
如何在Python中妥善使用进度条详解
2022/04/05 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs