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. 树莓派(Raspberry Pi)日期时间不准的修正方法

    在树莓派上,打date命令可以看到系统的日期时间: 后面的CST表示中国标准时间 小知识: 树莓派没有电池,断电后无法保存时间. 树莓派默认安装了NTP(Network Time Protocol)服 ...

  2. jsp脚本元素

    在JSP页面中有三种脚本元素(Scripting Elements):声明.小脚本和表达式. 声明(declaration)用来在JSP页面中声明变量和定义方法.声明是以<%!开头,以%> ...

  3. mvc中多参数URL会很长，首次加载不传参数让url很短，路由规则实现方法[bubuko.com]

    如要实现列表中地址全路径“bubuko-11-2.html”,在首次进入时,使用短路径“bubuko.html”,只有再次href后才显示全路径“bubuko-11-2.html”,下面使用路由规则来 ...

  4. firefox 下event事件失效的解决方法

    var evt = arguments.callee.caller.arguments[0] || window.event; evt.preventDefault(); evt.stopPropag ...

  5. 单点登录SSO

    转载自 http://www.blogjava.net/xcp/archive/2010/04/13/318125.html   摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统当 ...

  6. IIS 7.0 部署MVC

    开发的MVC 3.0 项目,在部署服务上还是与需要花一点功夫,这里把遇到的问题罗列出来. 本文主要介绍IIS 7.5中安装配置MVC 3.0的具体办法! 部署必备: Microsoft .net Fr ...

  7. 【学】React的学习之旅5-组件的嵌套

    复习 [array].map(function(item,index){})方法,传参里的函数需要有return值,一般用map()后都要用一个变量接一下,这个返回的还是一个数组,只是把每次遍历到的数 ...

  8. java中final 、finally、finalize的区别

    比较java中常用关键字以免混淆 final :用来修饰变量,表示变量为最终变量,不能被改变 finally:在处理异常的时候使用,表示最终要执行的代码块 finalize:java Object类中 ...

  9. 我的 Kernel

    求真 工作之后,渐渐与人打交道,人情世俗也慢慢接触了,领了工资之后,也可以买一些自己喜欢的东西,感觉也开始像一个独立完整的人了. 所见所闻也有所想了,有些理念开始慢慢转变了.但是,不知道为什么,对于假 ...

  10. OS X 系统，修改hosts文件后不生效的问题

    系统版本 OS X El Capitan,10.11.2 问题描述 业务需要,配置“nexus”为某个ip,如下图更改了 /etc/hosts 文件. 结果在ping的时候,请求并未发到指定ip上. ...