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 通过json自动生成Dom的代码
Apr 01 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
初识Node.js
Mar 20 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
python发送邮件脚本
2018/05/22 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
python import 上级目录的导入
2020/11/03 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
仓管岗位职责范本
2014/02/08 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
活动总结的格式
2014/05/07 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
活动经费申请报告
2015/05/15 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫