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的树型插件(OrangeTree)使用介绍
May 03 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
JavaScript实现alert弹框效果
Nov 19 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
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
详解Python中的循环语句的用法
2015/04/09 Python
Python实现截屏的函数
2015/07/26 Python
python实现给数组按片赋值的方法
2015/07/28 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
法制宣传月活动方案
2014/05/11 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
Django操作cookie的实现
2021/05/26 Python
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
使用JS实现简易计算器
2021/06/14 Javascript
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS