<!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. POJ 3275 Floyd传递闭包

    题意:Farmer John想按照奶牛产奶的能力给她们排序.现在已知有N头奶牛(1 ≤ N ≤ 1,000).FJ通过比较,已经知道了M(1 ≤ M ≤ 10,000)对相对关系.每一对关系表示为&q ...

  2. C#服务控件UpdatePanel的局部刷新与属性AutoPostBack回传

    C#服务控件许多都有AutoPostBack这一属性(AutoPostBack意思是自动回传,也就是说此控件值更改后是否和服务器进行交互),如下代码所示: protected void Textbox ...

  3. .net几种文件下载的方法

    .Net文件下载方式.... 之前在写上传文件.下载文件的时候,发现Response对象里面有好几种下载文件的方式,之后自己亲自实践了这几种方法,记录下以便以后复习... WriteFile文件下载 ...

  4. Rsync同步神器

    Rsync清理大批量垃圾数据 在Linux下删除海量文件的情况,需要删除数十万个文件.这个是之前的程序写的日志,增长很快,而且没什么用.这个时候,我们常用的删除命令rm -fr * 就不好用了,因为要 ...

  5. vue-router 原理解析

    “更新视图但不重新请求页面”是前端路由原理的核心之一,

  6. javascript中作用域

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Matlab与C++混合编程

    原文链接:http://blog.csdn.net/zouxy09/article/details/20553007 一不小心,成了一个忠实复制者...

  8. layui 多选下拉框 控件 样式改变原因

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. sql_1

    order by SELECT Company, OrderNumber FROM Orders ORDER BY Company DESC; SELECT Company, OrderNumber ...

  10. 了解http协议

    http:超文本传输协议 https:安全超文本传输协议 FTP:文件传输协议 TCP:网络控制协议 IP:互联网协议 UDP:用户数据协议 https协议特点-------------------- ...