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 相关文章推荐
ASP.NET中AJAX 调用实例代码
May 03 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
深入分析javascript中console命令
Aug 14 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
node.js如何操作MySQL数据库
Oct 29 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
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
python字典按照value排序方法
2020/12/28 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
财会自我鉴定范文
2013/12/27 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS