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 load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python单例模式实例详解
2017/03/01 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
《孔子拜师》教学反思
2014/02/24 职场文书
自我工作评价范文
2015/03/06 职场文书
大学生就业意向书
2015/05/11 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL