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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
JS简单计算器实例
Jan 20 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
js异步编程小技巧详解
Aug 14 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
解决Vue watch里调用方法的坑
Nov 07 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缓冲输出实例分析
2015/01/05 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
bootstrap data与jquery .data
2014/07/07 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
Python给你的头像加上圣诞帽
2018/01/04 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
电气专业应届生求职信
2013/11/01 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
材料会计岗位职责
2014/03/06 职场文书
企业诚信承诺书
2014/05/23 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
会计专业求职信范文
2015/03/19 职场文书
2015年领班工作总结
2015/04/29 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技