<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">

</select>

<div> 你选择了：{{selectedName}}</div>

<button ng-click="getNames()">点我！</button>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.names = ["Google", "Runoob", "Taobao"];

    $scope.getNames = function() {

        $scope.names = ["http", "get", "data"];

    };

});

</script>

<p>该实例演示了 ng-options 指令的使用。</p>

</body>

</html>

AngularJS 下拉列表demo的更多相关文章

  1. AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

    场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...

  2. AngularJS入门-demo

    双向绑定测试: <body ng-app> 请输入姓名:<input ng-model="myname"> <br> {{myname}},你好 ...

  3. AngularJS +HTML Demo

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  4. AngularJS入门Demo

    1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...

  5. AngularJs Test demo &front end MVVM implementation conjecture and argue.

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  6. angularjs transclude demo

    <!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...

  7. angularjs ngRoute demo

    <!doctype html> <html lang="en" ng-app="AMail"> <head> <met ...

  8. angularjs $watch demo

    <!doctype html> <html lang="en" ng-app> <head> <meta charset="UT ...

  9. vue1 get,post交互及百度下拉列表demo

随机推荐

  1. BZOJ 3910 并查集+线段树合并

    思路: 1. 并查集+线段树合并 记得f[LCA]==LCA的时候 f[LCA]=fa[LCA] 2.LCT(并不会写啊...) //By SiriusRen #include <cstdio& ...

  2. NOIP2013 D1T3 货车运输

    [NOIP2013T3]货车运输 背景 noip2013day1 描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重 量限制,简称限重.现在有 q 辆货 ...

  3. IE浏览器 ajax传参数值为中文时出现乱码的解决方案

    找了很多方法,发现就这个方法简单.直接.方便,直接推荐哦! 在汉字的位置加个保护措施:encodeURIComponent(parentid) 举个栗子>>> $.ajax({    ...

  4. Vue组件的三种调用方式

    最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...

  5. 在APP开发中，如何优雅的设计APP页面

    1.明确页面设计在整个产品设计中的位置 互联网产品设计的流程大致是:产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档.可以看到页面设计是处于整个流程的后期, ...

  6. Angular 通过constant（name,value）,value(name,value)创建服务

    区别: constant()可以将已经存在的变量值注册为服务,并将其注入到应用的其他部分中,他的value可以是值,也可以是对象.通过他来配置数据,也就是说可以在config里注入,但是他是不可以修改 ...

  7. RxSwift源码与模式分析一：基本类

    封装.变换与处理 // Represents a push style sequence. public protocol ObservableType : ObservableConvertible ...

  8. socket 的通信过程

    1.建立套接字 Linux在利用socket()系统调用建立新的套接字时,需要传递套接字的地址族标识符.套接字类型以及协议,其函数定义于net/socket.c中: asmlinkage long s ...

  9. 06 Django组件-cookie与session

    一.会话跟踪技术 1.什么是会话跟踪技术 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而 ...

  10. WebStorm 配置 svn

    1.下载 SlikSVN.   2.安装.路径 D:\Program Files\slik\bin.   3.在WebStorm中配置 file->settings->Version Co ...