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 相关文章推荐
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
javascript中的面向对象
Mar 30 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
js中switch语句的学习笔记
Mar 25 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转成EXE文件
2006/10/09 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
javascript 动态添加事件代码
2008/11/30 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
puppeteer库入门初探
2019/01/09 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
Python字符串三种格式化输出
2020/09/17 Python
Python中Yield的基本用法
2020/10/18 Python
python基于opencv实现人脸识别
2021/01/04 Python
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
财政局长自荐信范文
2013/12/22 职场文书
高中自我评价范文
2014/01/27 职场文书
2014年法院工作总结
2014/11/24 职场文书
小学运动会入场口号
2015/12/24 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python