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 小练习(实例代码)
Aug 07 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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中实现图片的锐化
2006/10/09 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
prettify 代码高亮着色器google出品
2010/12/28 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
js变量提升深入理解
2016/09/16 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
python字符串格式化方式解析
2019/10/19 Python
python爬虫容易学吗
2020/06/02 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
工作人员思想汇报
2014/01/09 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
还款承诺书范本
2015/01/20 职场文书
学生检讨书范文
2015/01/27 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
员工开除通知书
2015/04/25 职场文书
公司职员入党自传书
2015/06/26 职场文书