AngularJS使用ng-repeat指令实现下拉框


Posted in Javascript onAugust 23, 2016

AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题。下面给大家分享在项目中使用ng-repeat指令实现下拉框。

1、问题背景

select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建

2、实现源码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>AngularJS之下拉框(方式二)</title> 
<script type="text/javascript" src="../js/angular.min.js" ></script> 
<script> 
var app = angular.module("secondApp",[]); 
app.controller("secondCon",function($scope){ 
$scope.trees = ["松树","樟树","枫树","枣树","桃树"]; 
}); 
</script> 
</head> 
<body> 
<div ng-app="secondApp" ng-controller="secondCon"> 
<select style="width: 200px;"> 
<option ng-repeat="tree in trees">{{tree}}</option> 
</select> 
</div> 
</body> 
</html>

3、问题说明

ng-repeat指令可以重复数据

AngularJS使用ng-repeat指令实现下拉框

以上所述是小编给大家介绍的AngularJS使用ng-repeat指令实现下拉框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
HTML的select控件美化
Mar 27 Javascript
一个可复用的vue分页组件
May 15 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 #Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 #Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 #Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 #Javascript
js简单获取表单中单选按钮值的方法
Aug 23 #Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 #Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 #Javascript
You might like
php桌面中心(三) 修改数据库
2007/03/11 PHP
php mysql数据库操作类
2008/06/04 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
JS操作JSON要领详细总结
2013/08/25 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
python中执行shell命令的几个方法小结
2014/09/18 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
详解Python pygame安装过程笔记
2017/06/05 Python
python中requests和https使用简单示例
2018/01/18 Python
django输出html内容的实例
2018/05/27 Python
Python地图绘制实操详解
2019/03/04 Python
python实现取余操作的简单实例
2020/08/16 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
经典禁毒标语
2014/06/16 职场文书
治安消防安全责任书
2014/07/23 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
MySQL 分组查询的优化方法
2021/05/12 MySQL
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS