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删除所有的cookie的代码
Nov 25 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
js操作数组函数实例小结
Dec 10 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
node中的cookie的具体使用
2018/09/13 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
vue实现分页加载效果
2019/12/24 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
python 性能提升的几种方法
2016/07/15 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python购物车程序简单代码
2018/04/18 Python
python机器学习之神经网络实现
2018/10/13 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python networkx包的实现
2020/02/14 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
班级口号大全
2014/06/09 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
端午节寄语2015
2015/03/23 职场文书
联谊活动总结范文
2015/05/09 职场文书