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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
vue获取data数据改变前后的值方法
Nov 07 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
PHP处理会话函数大总结
2015/08/05 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
Python中逗号的三种作用实例分析
2015/06/08 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python super用法及原理详解
2020/01/20 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
html5 div布局与table布局详解
2016/11/16 HTML / CSS
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
关于颐和园的导游词
2015/01/30 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
孟佩杰观后感
2015/06/17 职场文书
宿舍管理制度范本
2015/08/07 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers