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= ...
随机推荐
- NavigationController的返回按钮自定义
假设需求时这样: NavigationController下有2个视图,从A视图会Push到B视图,默认情况下,当显示视图B时,视图B的导航bar上会出现返回按钮,按钮标题文字默认为A视图的title ...
- 微信小程序-发送模板消息（C#）
步骤一:获取模板ID 有两个方法可以获取模版ID 通过模版消息管理接口获取模版ID 在微信公众平台手动配置获取模版ID 步骤二:页面的 <form/> 组件,属性report-submit ...
- Java的类加载器
一.类加载器的概念 类加载器(class loader)用来加载 Java 类到 Java 虚拟机中.一般来说,Java 虚拟机使用 Java 类的方式如下:Java 源程序(.java 文件)在经过 ...
- .Net 内存对象分析
在生产环境中,通过运行日志我们会发现一些异常问题,此时,我们不能直接拿VS远程到服务器上调试,同时日志输出的信息无法百分百反映内存中对象的状态,比如说我们想查看进程中所有的Socket连接状态.服务路 ...
- 【技巧】datagrid锁定列后重新加载时出现错位问题的解决
[问题描述]:有时候datagrid设置了锁定列后,在重新加载datagrid数据时,出现锁定列与非锁定列数据错位的问题,如图: [问题分析]:查看css样式我们发现,锁定的列和非锁定的列属于两个不同 ...
- 冒泡排序（Bubble Sort）
冒泡排序的基本思路 冒泡排序是一种效率极低的排序,首先它需要知道数组的有效数据长度,再对数据第一个和第二个两两比较,按照比较规则进行交换,然后第二个数据和第三个数据进行比较,按照比较规则进行交换:第一 ...
- C# 使用FileUpload控件上传图片，将文件转换成二进制进行存储与读取
状况描述: 需要上传文件,但是不想要保存到实体路径下,便可以用该功能来实现. 效果图: 点击[Upload]按钮,上传文件到数据库: 点击[Preview],预览文件: 具体实现: 前台: <t ...
- python常见模块命令(os/sys/platform)
一.Os Python的标准库中的os模块主要涉及普遍的操作系统功能.可以在Linux和Windows下运行,与平台无关. os.sep 可以取代操作系统特定的路径分割符. os.name字符串指示你 ...
- AJAX学习前奏----JS基础加强
AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...
- java web Servlet 学习笔记 -3 会话管理技术
Cookie和HttpSession 什么是会话: 用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 每个用户在使用浏览器与服务器进行会话的过 ...