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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
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&amp;&amp;mysql)六
2006/10/09 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
javascript常用功能汇总
2015/07/05 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
vue实现评价星星功能
2020/06/30 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Python中@property的理解和使用示例
2019/06/11 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Python while true实现爬虫定时任务
2020/06/08 Python
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
火山动力Java笔试题
2014/06/26 面试题
实习自我鉴定范文
2013/10/30 职场文书
团日活动总结报告
2014/06/25 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书