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 学习 几种常用方法
Jun 11 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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与XML联手进行网站编程代码实例
2008/07/10 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php数组使用规则分析
2015/02/27 PHP
9个比较实用的php代码片段
2016/03/15 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
Python常用模块用法分析
2014/09/08 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
python中import与from方法总结(推荐)
2019/03/21 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
python破解同事的压缩包密码
2020/10/14 Python
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
《荷花》教学反思
2014/04/16 职场文书
合作协议书
2014/04/23 职场文书
机关搬迁方案
2014/05/18 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
安全守法证明
2015/06/23 职场文书