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 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 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 eval函数一句话木马代码
2015/05/21 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
js字符编码函数区别分析
2008/06/05 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
Python实现两个list对应元素相减操作示例
2017/06/09 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
Numpy之reshape()使用详解
2019/12/26 Python
django在开发中取消外键约束的实现
2020/05/20 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
成本会计实训报告
2014/11/05 职场文书
个人思想政治总结
2015/03/05 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
创业计划书之美容店
2019/09/16 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
Python OpenCV形态学运算示例详解
2022/04/07 Python
详解如何使用Nginx解决跨域问题
2022/05/06 Servers