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 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
JavaScript设计模式之观察者模式实例详解
Jan 16 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程序员工具
2008/05/26 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
python格式化字符串实例总结
2014/09/28 Python
python的re正则表达式实例代码
2018/01/24 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python matplotlib拟合直线的实现
2019/11/19 Python
pytorch的batch normalize使用详解
2020/01/15 Python
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
J2EE包括哪些技术
2016/11/25 面试题
租车协议书范本2014
2014/11/17 职场文书
离婚被告答辩状
2015/05/22 职场文书
九九重阳节致辞
2015/07/31 职场文书
关于军训的感想
2015/08/07 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
如何在Python中妥善使用进度条详解
2022/04/05 Python