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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 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 超链接 抓取实现代码
2009/06/29 PHP
php获取根域名方法汇总
2014/10/28 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
jquery text()要注意啦
2009/10/30 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
python插入排序算法实例分析
2015/07/03 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
python把转列表为集合的方法
2019/06/28 Python
基于django传递数据到后端的例子
2019/08/16 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python清空命令行方式
2020/01/13 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
中秋节超市促销方案
2014/01/30 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
师德演讲稿范文
2014/05/06 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书