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代码
Apr 23 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
基本DOM节点操作
Jan 17 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
JavaScript this 深入理解
2009/07/30 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
python结合API实现即时天气信息
2016/01/19 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
毕业实习个人鉴定范文
2013/12/10 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
人资专员岗位职责
2014/04/04 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
MySQL GRANT用户授权的实现
2021/06/18 MySQL
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA