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 相关文章推荐
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
element中table高度自适应的实现
Oct 21 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
javascript中的一些注意事项 更新中
2010/12/06 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
详解Python编程中time模块的使用
2015/11/20 Python
Django Highcharts制作图表
2016/08/27 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
班子个人四风问题整改措施
2014/10/04 职场文书
2016寒假假期总结
2015/10/10 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
python中24小时制转换为12小时制的方法
2021/06/18 Python
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android
Python可视化神器pyecharts绘制水球图
2022/07/07 Python