首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS入门教程之Select(选择框)详解

Posted in Javascript onJuly 27, 2016

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select 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", "Runoob", "Taobao"];
});
</script>

<p>该实例演示了 ng-options 指令的使用。</p>

</body>
</html>

运行结果：

该实例演示了 ng-options 指令的使用。

ng-options 与 ng-repeat

我们也可以使用ng-repeat 指令来创建下拉列表：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.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", "Runoob", "Taobao"];
});
</script>

<p>该实例演示了使用 ng-repeat 指令来创建下拉列表。</p>

</body>
</html>

运行结果：

该实例演示了使用 ng-repeat 指令来创建下拉列表。

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

应该用哪个更好?

假设我们使用以下对象:

$scope.sites = [
 {site : "Google", url : "http://www.google.com"},
 {site : "Runoob", url : "http://www.runoob.com"},
 {site : "Taobao", url : "http://www.taobao.com"}
];

ng-repeat 有局限性，选择的值是一个字符串:

实例

使用 ng-repeat:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择网站:</p>

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>你选择的是: {{selectedSite}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.sites = [
	 {site : "Google", url : "http://www.google.com"},
	 {site : "Runoob", url : "http://www.runoob.com"},
	 {site : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>

<p>该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。</p>
</body>
</html>

运行效果：

 选择网站：

你选择的是：http://www.google.com

 该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。

 使用 ng-options 指令，选择的值是一个对象：

实例

使用 ng-options:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择网站:</p>

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.sites = [
	 {site : "Google", url : "http://www.google.com"},
	 {site : "Runoob", url : "http://www.runoob.com"},
	 {site : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>

<p>该实例演示了使用 ng-options 指令来创建下拉列表，选中的值是一个对象。</p>
</body>
</html>

 运行效果：

 选择网站：

你选择的是：google

网址为：http://www.google.com

该实例演示了使用 ng-options 指令来创建下拉列表，选中的值是一个对象。

 当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

数据源为对象

前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。

$scope.sites = {
 site01 : "Google",
 site02 : "Runoob",
 site03 : "Taobao"
};

ng-options 使用对象有很大的不同，如下所示：

实例

使用对象作为数据源, x 为键(key), y 为值(value):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择的网站是:</p>

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

<h1>你选择的值是: {{selectedSite}}</h1>

</div>

<p>该实例演示了使用对象作为创建下拉列表。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.sites = {
	 site01 : "Google",
	 site02 : "Runoob",
	 site03 : "Taobao"
	};
});
</script>

</body>
</html>

运行效果：

选择的网站是：

你选择的值是：Google

该实例演示了使用对象作为创建下拉列表。

 你选择的值为在 key-value 对中的 value。

value 在 key-value 对中也可以是个对象：

实例

选择的值在 key-value 对的 value 中, 这是它是一个对象:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择一辆车:</p>

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>

<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>

<p>注意选中的值是一个对象。</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Fiat", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"}
 }
});
</script>

</body>
</html>

运行结果：

选择一辆车

你选择的是： Fiat

模型： 500

颜色： white

注意： 选中的值是一个对象。

在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性：

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择一辆车:</p>

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你选择的是: {{selectedCar.brand}}</p>
<p>型号为: {{selectedCar.model}}</p>
<p>颜色为: {{selectedCar.color}}</p>

<p>下拉列表中的选项也可以是对象的属性。</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Fiat", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"}
 }
});
</script>

</body>
</html>

运行结果：

选择一辆车：

你选择的是： Ford

型号为：Mustang

颜色为： red

下拉列表中的选项也可以是对象的属性。

以上就是对AngularJS Select资料的整理，后续继续补充，希望能帮助有需要的朋友。

AngularJS入门教程之Select(选择框)详解

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
javascript中的new使用
Mar 20 Javascript
JS俄罗斯方块，包含完整的设计理念
Dec 11 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
关于JS中的方法是否加括号的问题
Jul 27 #Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 #Javascript
AngularJS入门教程之服务(Service)
Jul 27 #Javascript
AngularJS 过滤器的简单实例
Jul 27 #Javascript
AngularJS延迟加载html template
Jul 27 #Javascript
AngularJS入门教程之控制器详解
Jul 27 #Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 #Javascript
字符集(1) Vscode(3) 时钟(1) OVERLORD(1) SSH(3) mysql(6) 2022年7月新番(1) 算法(1) 数据表(1) character(1)
You might like
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
layui文件上传实现代码
2017/05/20 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
vue中如何使用ztree
2018/02/06 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python3随机漫步生成数据并绘制
2018/08/27 Python
python数据爬下来保存的位置
2020/02/17 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
python Xpath语法的使用
2020/11/26 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
python re模块常见用法例举
2021/03/01 Python
美容院营销方案
2014/03/05 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
商铺门面租房协议书
2014/10/21 职场文书
离婚协议书范文
2015/01/26 职场文书
活动主持人开场白
2015/05/28 职场文书
边城读书笔记
2015/06/29 职场文书
新学期开学标语2015
2015/07/16 职场文书