AngularJS学习篇（十）
AngularJS Select(选择框)
使用 ng-options 创建选择框
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.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>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',function ($scope) {
$scope.names=['google','baidu','tengxun'];
})
</script>
</body>
</html>
ng-init 初始值，ng-options="x for x in names"读取数组
使用 ng-repeat 创建选择框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',function ($scope) {
$scope.names=['google','baidu','tengxun'];
})
</script>
</body>
</html>
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSite">
<option ng-repeat="x in names" value="{{x.url}}">{{x.site}}</option>
</select> <h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',function ($scope) {
$scope.names=[ {site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}];
})
</script>
</body>
</html>
你选择的是: http://www.runoob.com---->字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSite" ng-options="x.site for x in names">
</select> <h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',function ($scope) {
$scope.names=[ {site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}];
})
</script>
</body>
</html>
你选择的是: {"site":"Google","url":"http://www.google.com"}---->对象
数据源为对象
使用对象作为数据源, x 为键(key), y 为值(value):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSite" ng-options="x for (x,y) in names">
</select> <h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',function ($scope) {
$scope.names= {site1 : "Google", site2 : "http://www.google.com"};
})
</script>
</body>
</html>
你选择的是: Google
你选择的值为在 key-value 对中的 value。
value 在 key-value 对中也可以是个对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSite" ng-options="x for (x,y) in names">
</select> <h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',function ($scope) {
$scope.names= {car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}};
})
</script>
</body>
</html>
你选择的是: {"brand":"Ford","model":"Mustang","color":"red"}
在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性，但是选项还是value：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSite" ng-options="y.brand for (x,y) in names">
</select> <h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',function ($scope) {
$scope.names= {car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}};
})
</script>
</body>
</html>
你选择的是: {"brand":"Ford","model":"Mustang","color":"red"}
AngularJS学习篇（十）的更多相关文章
- AngularJS学习篇（二十四）
AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...
- AngularJS学习篇（二十二）
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- AngularJS学习篇（二十）
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...
- AngularJS学习篇（十九）
AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...
- AngularJS学习篇（十八）
AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...
- AngularJS学习篇（十六）
AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...
- AngularJS学习篇（十五）
AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular. ...
- AngularJS学习篇（十四）
AngularJS 事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html> <head& ...
- AngularJS学习篇（十二）
AngularJS SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset= ...
随机推荐
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...
- PyTorch教程之Tensors
Tensors类似于numpy的ndarrays,但是可以在GPU上使用来加速计算. 一.Tensors的构建 from __future__ import print_function import ...
- 安装Appium
1.Appium官方网站:http://appium.io/ 拉到页面底端显示下面一段描述: > brew install node # get node.js > npm install ...
- Response.Write输出导致页面变形和页面白屏解决办法
方法一:此方法应该是微软官方推荐的方法,但弹出时会造成页面白屏.Page.RegisterStartupScript("TestEvent", "<script&g ...
- try catch finally 中包含return的几种情况，及返回结果
当当当,兴致勃勃的第二篇博客,散花~ 下面是正题(敲黑板) 第一种情况:在try和catch中有return,finally中没有return,且finally中没有对try或catch中要 retu ...
- python中package注意事项
个人工作中的SSD.Cardreader.Camera.Audio模块文档组织形式如下: RclLib __init__.py RclLegacy.py modules AgilentOp.py Uv ...
- 学习札记 ----wind7下如何安装SqlServer数据库
1.控制面板 ---找到程序和功能选项 如下图所示: 2.打开程序和功能后进入如下图所示的界面,点击打开或关闭window功能. 3.启动window7自带的IIS功能.如下图所示: 4.如上动作准备 ...
- SQL 2008 外网访问说明
1. 安装SQL2008 . 安装SQL2008之前,必须预先安装.NET Framework 3.5,和Windows Installer 4.5 Redistributable. 可能产生错误: ...
- 江西省移动物联网发展战略新闻发布会举行-2017年10月江西IDC排行榜与发展报告
编者按:当人们在做技术创新时,我们在做“外包产业“:当人们在做制造产业,我们在做”服务产业“:江人们在做AI智能时,我们在做”物联网“崛起,即使有一个落差,但红色热土从不缺少成长激情. 本期摘自上月初 ...
- winPcap编程之不用回调方法捕获数据包(五 转)
这一次要分析的实例程序跟上一讲非常类似(“打开适配器并捕获数据包”),略微不同的一点是本次将pcap_loop()函数替换成了pcap_next_ex()函数.本节的重点也就是说一下这两个函数之间的差 ...