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. asp.net mvc4 学习笔记一（基本原理）

    做了8年的asp.net webform,用过MVVM但还没用过MVC , 虽然项目不用MVC,但是还是想了解一下,今天第二天学习,以下是学习心得. VS2012默认带有asp.net mvc3和as ...

  2. C#遍历指定文件夹中的所有文件和子文件夹

    参考:http://www.cnblogs.com/skylaugh/archive/2012/09/23/2698850.html DirectoryInfo TheFolder=new Direc ...

  3. Fatal error 829---数据库 ID 8，页 (1:80740) 已标记为 RestorePending，可能表明磁盘已损坏（日志备份和热备、双机的重要性）

    问题现象: 在业务数据库中查询:SELECT a.NAME FROM SYSOBJECTS a WHERE a.NAME LIKE '%2015' AND a.XTYPE='u' 提示:消息 21,级 ...

  4. asp.net mvc js 获取model值。

    cshtml页面部分代码: div class="col-sub">          @using (Html.BeginForm("SaveTTMallConf ...

  5. highchart 中数据千分位显示为空格而不是逗号的解决方案

    thousandsSep: String   一千的分隔符 在highcharts.js 中找到  thousandsSep位置,把"" 改为  ","

  6. python基础知识点整理

    序列 描述 sequence(序列)是一组有顺序的元素的集合.序列可以包含一个或多个元素,也可以没有任何元素.我们之前所说的基本数据类型,都可以作为序列的元素. 序列有两种:tuple(定值表: 也有 ...

  7. jquery 百度搜索

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Spring Mvc Rest为不支持DELETE/PUT的浏览器添加DELETE/PUT支持

    现在都流行RESTFul,但是有一个问题,有些浏览器现在就不支持delete/put方式的请求,这些请求发出去之后都会变成get请求,导致rest接口无法被访问到.为了解决这个问题,spring提出了 ...

  9. [原]JQuery mobile CSS 文件组织

    从 JQuery mobile 1.4 开始, CSS 由3个部分组成,分别是 Icons.Theme和Structure jquery.mobile-1.4.x.css:  包括了 <标准图标 ...

  10. web应用虚拟目录的映射

    1.新建一个web应用.在D盘新建一个news文件夹,文件夹下面新建一个html文件.如下图所示: 2.将web应用映射到服务器的虚拟目录 第一种方式: 2.1 用记事本打开tomcat目录下面的se ...