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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
jqgrid 简单学习笔记
May 03 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 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实现12306余票查询、价格查询示例
2014/04/17 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
常用简易JavaScript函数
2009/04/09 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
祖国在我心中演讲稿300字
2014/05/04 职场文书
产品售后服务承诺书
2014/05/21 职场文书
工程部主管岗位职责
2015/02/12 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
PyTorch中的torch.cat简单介绍
2022/03/17 Python