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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 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
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
关于js内存泄露的一个好例子
2013/12/09 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
创业计划书中要认真思考的问题
2013/12/28 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
2014年评职称工作总结
2014/11/20 职场文书
求职自荐信怎么写
2015/03/04 职场文书
保险公司增员口号
2015/12/25 职场文书