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 加上最后自己的验证
Nov 04 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
JS中Location使用详解
May 12 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
JavaScript 绘制饼图的示例
Feb 19 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加MYSQL服务器
2006/10/09 PHP
简化php模板页面中分页代码的解析
2009/02/06 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
accesskey 提交
2006/06/26 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
养殖行业的创业计划书
2014/01/05 职场文书
关于读书的活动方案
2014/08/14 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
学校隐患排查制度
2015/08/05 职场文书
导游词之镜泊湖
2019/12/09 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记