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 相关文章推荐
菜单效果
Oct 14 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
面包屑导航详解
Dec 07 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
深入理解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+mysql写的留言本
2006/10/09 PHP
PHP面向对象编程快速入门
2006/12/14 PHP
php修改时间格式的代码
2011/05/29 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
python实现ftp文件传输功能
2020/03/20 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
基督教婚礼主持词
2014/03/14 职场文书
家长会主持词
2014/03/26 职场文书
施工协议书范本
2014/04/22 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
玄武湖导游词
2015/02/05 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
vue如何清除浏览器历史栈
2022/05/25 Vue.js