1. ng-repeat实现下拉框：

select下拉框里option组装成下拉框，这里利用ng-repeat指令来创建

实现源码

 
<!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>

2.ng-option指令使用很简单，只需要绑定两个属性：

一个是ng-model用于获取选定的值；

另一个是ng-options用于确定下拉列表的元素数组。

<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>

上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定，然后列表中的选项是activities中的每一个值。数据如下：

$scope.engineer = {

                name: "Dani",

                currentActivity: "Fixing bugs"

            };

            $scope.activities =

            [

                "Writing code",

                "Testing code",

                "Fixing bugs",

                "Dancing"

            ];

在angular中实现下拉框的两种方式 ng-repeat和 ng-option的更多相关文章

  1. 选择屏幕中的下拉框和dialog中下拉框设计

    REPORT  YTEST014. PARAMETERS: auart LIKE vapma-auart  AS LISTBOX   VISIBLE LENGTH 6. AT SELECTION-SC ...

  2. ASP.NET MVC中的cshtml页面中的下拉框的使用

    ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...

  3. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  4. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  5. python中字典的循环遍历的两种方式

    开发中经常会用到对于字典.列表等数据的循环遍历,但是python中对于字典的遍历对于很多初学者来讲非常陌生,今天就来讲一下python中字典的循环遍历的两种方式. 注意: python2和python ...

  6. Android中H5和Native交互的两种方式

    Android中H5和Native交互的两种方式:http://www.jianshu.com/p/bcb5d8582d92 注意事项: 1.android给h5页面注入一个对象(WZApp),这个对 ...

  7. C语言中存储多个字符串的两种方式

    C语言中存储多个字符串的两种方式 方式一    二维字符串数组 声明: char name[][] = { "Justinian", "Momo", " ...

  8. Excel中添加下拉框

    数据->数据验证->数据验证 设置—>允许下拉框中选择序列,来源中写下拉选项,每个选项之间用逗号隔开

  9. selenium中的下拉框处理模块Select

    在UI自动化测试过程中,经常会遇到一些下拉框,如果我们基于Webdriver操作的话就需要click两次,而且很容易出现问题,实际上Selenium给我们提供了专门的Select(下拉框处理模块). ...

随机推荐

  1. 如何解决CDR x8安装时显示“已停止工作”

    相信很多朋友在安装cdr X8时会遇到这样一种情况,能装上去,但不能运行,弹出提示说CorelDRAW X8(64-bit)已停止工作.同样的X8安装包,在不同的电脑上测试有的没有问题,有的则会出现以 ...

  2. ionic 常见问题

    1.Couldn't find ionic.config.json file. ? a.在C:\Users\(Username)\.ionic目录下有ionic.config这个文件 添加后缀名jso ...

  3. coffeeScript中类的多态［学习篇］

    类的一大应用就是多态.多态是一个面向对象编程的高级术语----“一个东西可编程很多不同的东西,但不是任何东西”.［引自coffeescript深入浅出］ class Shape constructor ...

  4. SQL Server中的锁 详解 nolock,rowlock,tablock,xlock,paglock

    摘自: http://www.myexception.cn/sql-server/385562.html 高手进 锁 nolock,rowlock,tablock,xlock,paglock 锁 no ...

  5. WinForm中使用XML文件存储用户配置及操作本地Config配置文件(zt)

    因项目中采用CS结构读取Web.config文件,故参照一下的连接完成此功能,在此感谢原作者! 原文地址: http://www.cnblogs.com/zfanlong1314/p/3623622. ...

  6. 北京全景视频外包公司：长年承接VR全景视频外包

    北京动点飞扬软件,从事外包业务五年,长年承接全景VR视频,全景普通视频外包. 以下是全景VR视频案例(可操作,人不动景物不动,人移动,景物跟随) 欢迎联系我们QQ:372900288 TEL:1391 ...

  7. 使用Ajax实现的批量删除操作（C#）

    今天做了一个简单的批量删除操作,虽然简单,但是很多问题出现,终究还是技术不够熟练. 现在在这里跟大家分享一下.仅供学习... 1.在前台获取用户点击的信息id,把这里id封装到一个数组里面:(rows ...

  8. View 的 focus 和 selected 状态， TabContainer实现

    View的 isFocusableInTouchMode() 默认是 false, 需调用 setFocusableInTouchMode(true) 才为true要让 button 等 view 调 ...

  9. MySQL服务 - 客户端工具mysql及mysqladmin使用介绍

    mysql客户端: mysql工具是MySQL官方提供的连接工具,用户可以通过mysql连接到mysqld上进行一系列的SQL操作.mysql工具有两种模式:交互模式和命令行模式.交互模式指令需要连接 ...

  10. Linux命令（22）find的使用

    在linux下面工作,有些命令能够大大提高效率. 比如说find命令,他哥俩可以算是必会的linux命令,几乎每天都要用到他们. find命令 find命令的一般形式 find命令的常用选项及实例 f ...