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 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
jquery遍历json对象集合详解
May 18 Javascript
js实现下拉菜单效果
Mar 01 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
js实现全选反选不选功能代码详解
Apr 24 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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 strtok()函数的优点分析
2010/03/02 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python while 循环使用的简单实例
2016/06/08 Python
python中函数传参详解
2016/07/03 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
python3对接mysql数据库实例详解
2019/04/30 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
贷款委托书
2014/08/01 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
个人工作表现自我评价
2015/03/06 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
Spring实现内置监听器
2021/07/09 Java/Android