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中null与undefined分析
Jul 25 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
Vuex简单入门
Apr 19 Javascript
了解JavaScript中的选择器
May 24 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
php解析json数据实例
2014/08/19 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
vue实现登录拦截
2020/06/29 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
用python删除java文件头上版权信息的方法
2014/07/31 Python
Python实现带百分比的进度条
2016/06/28 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
总监职责范文
2013/11/09 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
岗位说明书标准范本
2014/07/30 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
党员承诺书范文2015
2015/04/27 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
工作简报格式范文
2015/07/21 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers