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 相关文章推荐
js 替换
Feb 19 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
vue递归实现树形组件
Jul 15 Vue.js
深入理解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
无线电广播的开始
2002/01/30 无线电
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
python判断自身是否正在运行的方法
2019/08/08 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
如何利用Python写个坦克大战
2020/11/18 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
初三政治教学反思
2014/01/30 职场文书
少儿节目主持串词
2014/04/02 职场文书
村干部培训方案
2014/05/02 职场文书
2014年科技工作总结
2014/11/26 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript