AngularJS使用ng-repeat指令实现下拉框

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指令实现下拉框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • AngularJS使用ngOption实现下拉列表的实例代码

    AngularJS使用ngOption实现下拉列表的实例代码

    下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. <select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select> 上面这条语句就是把选择

  • Angularjs实现带查找筛选功能的select下拉框示例代码

    前言 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析 我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功

  • angularjs实现下拉列表的选中事件示例

    angularjs实现下拉列表的选中事件示例

    select标签的对于大家来说很熟悉了,下面我来讲讲AngularJS中 对select的属性设置,做出选择某个下拉选项后控制其他标签的隐藏: <select style="height:31px; width:100px" id="rewardMethod"name="rewardMethod" class="status_select" ng-model="state"> <optio

  • AngularJS中下拉框的高级用法示例

    AngularJS中下拉框的高级用法示例

    本文实例讲述了AngularJS中下拉框的高级用法.分享给大家供大家参考,具体如下: HTML正文: <body ng-app="myApp"> <!-- 对象内部属性遍历:x--key y---value --> <div ng-controller="myctr01"> {{sites}}<br> <select ng-model="site" ng-options="x for

  • AngularJS使用ng-options指令实现下拉框

    AngularJS使用ng-options指令实现下拉框

    ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. 1.问题背景 一般情况下,select下都会有option,但是AngularJS中有指令ng-options,就可以实现select下拉框 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

  • AngularJS中下拉框的基本用法示例

    AngularJS中下拉框的基本用法示例

    本文实例讲述了AngularJS中下拉框的基本用法.分享给大家供大家参考,具体如下: HTML正文: <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"></select> 等价于: <select> <option

  • Angularjs实现下拉框联动的示例代码

    Angularjs实现下拉框联动的示例代码

    第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model

  • angularjs 实现带查找筛选功能的select下拉框实例

    angularjs 实现带查找筛选功能的select下拉框实例

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析:    目标 在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele

  • angularjs下拉框空白的解决办法

    搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: <select class="form-control" ng-model="UserState" ng-init="UserState=0"> <option value="-1">选择状态</option> <option value="0">

  • AngularJS使用ng-repeat指令实现下拉框

    AngularJS使用ng-repeat指令实现下拉框

    AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题.下面给大家分享在项目中使用ng-repeat指令实现下拉框. 1.问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之

  • Angular实现下拉框模糊查询功能示例

    Angular实现下拉框模糊查询功能示例

    本文实例讲述了Angular实现下拉框模糊查询功能.分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的.对应偏重于数据处理的项目还是非常有优势的. 写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了. 1. 普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"

  • angularjs 动态从后台获取下拉框的值方法

    angularjs 动态从后台获取下拉框的值,只要是使用repeat指令,后台提供的是一个list的对象,里面包含value和显示的值,如下: js文件: //职务等级和档次/军衔等级和档次,需要从后台获取:poslist,type:2/3/4/5 $scope.getDyActivityInforItems=function(){ serviceData.getData('inforinput/getAllSelectValueByType','POST',{ type:2 }).then(f

  • AngularJS实现的select二级联动下拉菜单功能示例

    本文实例讲述了AngularJS实现的select二级联动下拉菜单功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <script src="../script/angular.js"

  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

  • vue通过指令(directives)实现点击空白处收起下拉框

    vue通过指令(directives)实现点击空白处收起下拉框

    日常开发中有时会有这样的需求,就是展开下拉框的时候,通过点击空白处,可以实现让下拉框收回.这里我们通过vue2.0中的自定义指令来简单实现. 貌似截图尺寸有点大(╯﹏╰) vue自定义指令 解释(参考官方文档) 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. 举例: 我们要让这样一个输入框在页面加载的

随机推荐