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国旗变换效果代码
Aug 13 Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
jquery实现网页定位导航
Aug 23 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
js 通用javascript函数库整理
2011/08/14 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
python入门教程之识别验证码
2017/03/04 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Python 自由定制表格的实现示例
2020/03/20 Python
Python-split()函数实例用法讲解
2020/12/18 Python
python 将Excel转Word的示例
2021/03/02 Python
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
投标单位介绍信
2014/01/09 职场文书
教师党员承诺书
2014/03/25 职场文书
领导干部保密承诺书
2014/08/30 职场文书
婚礼答谢礼品
2015/01/20 职场文书
商务英语求职信范文
2015/03/19 职场文书
新郎新娘致辞
2015/07/31 职场文书
生日寿星公答谢词
2015/09/29 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL