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 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
vue中data里面的数据相互使用方式
Jun 05 Vue.js
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
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python3实现多线程聊天室
2018/12/12 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
python简单区块链模拟详解
2019/07/03 Python
Pytorch之finetune使用详解
2020/01/18 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
社团成立邀请函
2014/01/08 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
门店业绩提升方案
2014/06/08 职场文书
师德标兵事迹材料
2014/12/19 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
技术入股协议书
2016/03/22 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server