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 相关文章推荐
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
jquery操作select方法汇总
Feb 05 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 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完整的日历类(CLASS)
2006/11/27 PHP
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
php 学习资料零碎东西
2010/12/04 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
python编写的最短路径算法
2015/03/25 Python
python executemany的使用及注意事项
2017/03/13 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
PyTorch实现AlexNet示例
2020/01/14 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
2014年大学生就业规划书
2014/04/04 职场文书
企业诚信承诺书
2014/05/23 职场文书
民事辩护词范文
2015/05/21 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL
vue中div禁止点击事件的实现
2022/04/02 Vue.js