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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
详解javascript中的Error对象
Apr 25 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
php格式文件打开的四种方法
2018/02/24 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
python中的闭包函数
2018/02/09 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
自荐信的禁忌和要点
2013/10/15 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
学生检讨书怎么写
2015/05/07 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript