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 tools 系列 scrollable(2)
Sep 06 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
javascript前端实现多视频上传
Dec 13 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
很实用的一个完整email发送程序
2006/10/09 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Python字符串处理实现单词反转
2017/06/14 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
python数据类型强制转换实例详解
2020/06/22 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
《假如》教学反思
2014/04/17 职场文书
会计求职自荐信
2014/06/20 职场文书
文明好少年事迹材料
2014/08/19 职场文书
追悼会答谢词
2015/01/05 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
婚宴新娘致辞
2015/07/28 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书