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代码
Sep 04 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
ES6的新特性概览
Mar 10 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
javascript实现下拉菜单效果
Feb 09 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(三)
2012/03/22 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python实现简单的代理服务器
2015/07/25 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
关于Java String的一道面试题
2013/09/29 面试题
高中毕业自我鉴定
2013/12/22 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
小学数学课后反思
2014/04/23 职场文书
小区文明倡议书
2014/05/16 职场文书
先进个人推荐材料
2014/12/29 职场文书
就业意向协议书
2015/01/29 职场文书
简单的辞职信模板
2015/05/12 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技