<!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. HBase编程 API入门系列之delete.deleteColumn和delete.deleteColumns区别（客户端而言）（4）

    心得,写在前面的话,也许,中间会要多次执行,连接超时,多试试就好了. delete.deleteColumn和delete.deleteColumns区别是: deleteColumn是删除某一个列簇 ...

  2. [lua]异步串行流程*协程

    local function param_pack( params, callback ) table.insert(params, callback) return params end local ...

  3. [Codeforces]Codeforces Round #460 (Div. 2)

    Supermarket 找最便宜的就行 Solution Perfect Number 暴力做 Solution Seat Arrangement 注意当k=1时,横着和竖着是同一种方案 Soluti ...

  4. 在APP开发设计过程中：如何设计启动页面？

    心理学上有一个“7秒理论”,说的是,一个人对另一个人的印象,在初次见面的七秒内就会形成,最近更有研究表明,这个时间可能更短——不到1秒.所以初次见面所展示的形象真的很重要.同理,用户在使用APP时,每 ...

  5. 时空上下文视觉跟踪（STC）

    论文的关键点是对时空上下文(Spatio-Temporal Context)信息的利用.主要思想是通过贝叶斯框架对要跟踪的目标和它的局部上下文区域的时空关系进行建模,得到目标和其周围区域低级特征的统计 ...

  6. 【技术累积】【点】【java】【8】maven常用命令（持续更新）

    建立 mvn archetype:generate -DgroupId=com.andy.test -DartifactId=test-project -Dversion=0.0.1-SNAPSHOT ...

  7. 【技术累积】【点】【java】【6】时间戳

    闲聊 加班多诶,写博客诶. 基本 时间戳,直观理解就是时间上面盖个戳罢了,在时间这个轴上面记录个点: unix时间戳表示从开始的时间点开始,经过了多少秒: 可以简单的看做是一个计时器: 基本定义可以直 ...

  8. jq图片懒加载

    jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazyload.js ...

  9. JS中的map

    定义和用法: map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值. map() 方法按照原始数组元素顺序依次处理元素. 注意: map() 不会对空数组进行检测. 注意: m ...

  10. 网络教程(8）IP协议

    两台计算机间不是直接连接的,所以不能使用PPP协议,那么它们是怎么链接的呢? host A想把信息传给host B ethernet帧中的目标mac地址传到SFO后开始使用PPP协议   [Media ...