AngularJS基础 ng-options 指令详解


Posted in Javascript onAugust 02, 2016

AngularJS ng-options 指令

AngularJS 实例

使用数组元素填充下拉列表:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="item for item in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

<p>该实例演示了如何使用 ng-options 指令填充下拉列表。</p>

</body>
</html>

定义和用法

ng-options 指令用于使用 <options> 填充 <select> 元素的选项。

ng-options 指令使用数组来填充下拉列表,多数情况下与 ng-repeat 指令一起使用。

语法

<select ng-options="array expression"></select>

<details> 元素支持该指令。

参数值

描述
array expression 数组中为 select 元素填充选项的表达式。

以上就是对AngularJS ng-options资料的整理,后续继续补充。

Javascript 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
jQuery 处理网页内容的实现代码
Feb 15 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
javascript 实现 原路返回
Jan 21 Javascript
学习Angularjs分页指令
Jul 01 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
深入理解JavaScript中Ajax
Aug 02 #Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 #Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 #Javascript
实例详解jQuery的无new构建
Aug 02 #Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 #Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 #Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 #Javascript
You might like
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
eclipse php wamp配置教程
2016/06/30 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
javascript一点特殊用法
2008/05/28 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python构建网页爬虫原理分析
2017/12/19 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python全排列操作实例分析
2018/07/24 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
总务岗位职责
2013/11/19 职场文书
怎样写演讲稿
2014/01/04 职场文书
道德演讲稿
2014/05/21 职场文书
项目经理岗位职责
2015/01/31 职场文书
英文邀请函
2015/02/02 职场文书
幼儿园辞职书
2015/02/26 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server