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 相关文章推荐
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
vue一步步实现alert功能
Jul 05 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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执行批量mysql语句的解决方法
2013/05/02 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
Vue异步加载about组件
2017/10/31 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python正则表达式re模块详细介绍
2014/05/29 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
Python3读写ini配置文件的示例
2020/11/06 Python
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
竞选演讲稿范文
2013/12/28 职场文书
银行批评与自我批评
2014/02/10 职场文书
职业女性的职业规划
2014/03/04 职场文书
五一手机促销方案
2014/03/08 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
初中学生期末评语
2014/04/24 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书