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 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
详解Javascript继承的实现
Mar 25 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
vue.js开发环境搭建教程
May 04 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript—window对象使用示例
2013/12/09 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python 列表(List)操作方法详解
2014/03/11 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python实现自动解数独小程序
2019/01/21 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
求职信的正确写法
2014/07/10 职场文书
应聘护士求职信
2014/07/21 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
论语读书笔记
2015/06/26 职场文书
2015年教师节感言
2015/08/03 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python