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"}

转载于:https://www.cnblogs.com/dehuachenyunfei/p/6648459.html

AngularJS学习篇（十）相关推荐

AngularJS学习篇（十六）
AngularJS 表单 HTML 控件以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...
AngularJS学习篇（十九）
AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...
Java学习篇十——关于方法的定义和使用
写在前面:本人是借助两本参考书自学的,其中部分例子和语句均是来自参考书.第一本:<Java 编程指南>,[美] Budi Kurniawan 著,闫斌贺莲译.第二本:<第一行代码 ...
redis学习篇(十)-----高级特性之持久化处理
2019独角兽企业重金招聘Python工程师标准>>> redis是基于内存的数据库.基于内存的数据库速度虽然快,但是却有一个严重的弊端:当服务器突然宕机或者断电时,内存里的数据都会 ...
“深度学习”这十年：52篇大神级论文再现AI荣与光
来源:新智元本文约4100字,建议阅读6分钟从"深度学习三巨头"到何恺明,从谷歌到MIT,52篇神级论文带大家回顾深度学习这十年. [ 导读 ]从自动驾驶到Deepfake,深 ...
python学习[第十四篇] 文件的输入与输出
python学习[第十四篇] 文件的输入与输出标准文件类型一般来说只要程序一执行,就会访问3个文件: 标准输入(键盘) stdin 标准输出(显示器缓冲区) stdout 默认输出到屏幕标准错误 ...
AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块通过 AngularJS 的 angular ...
Python语言入门这一篇就够了-学习笔记(十二万字)
Python语言入门这一篇就够了-学习笔记(十二万字) 友情提示:先关注收藏,再查看,12万字保姆级 Python语言从入门到精通教程. 文章目录 Python语言入门这一篇就够了-学习笔记(十二万字 ...
python学习[第十五篇] 文件系统
python学习[第十五篇] 文件系统对文件系统访问大多数都通过os模块实现. os 模块文件/目录访问函数文件处理 mkfifo() 创建命名通道只用于linux remove(path)/un ...

AngularJS学习篇（十）

AngularJS Select(选择框)

使用 ng-options 创建选择框

使用 ng-repeat 创建选择框

你选择的是: http://www.runoob.com---->字符串

你选择的是: {"site":"Google","url":"http://www.google.com"}---->对象

数据源为对象

你选择的是: Google

你选择的是: {"brand":"Ford","model":"Mustang","color":"red"}

你选择的是: {"brand":"Ford","model":"Mustang","color":"red"}

AngularJS学习篇（十）相关推荐

最新文章

热门文章