首页
所有分类
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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
node中使用shell脚本的方法步骤
Mar 23 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
SRF-40W(1) YH-R296(1) ICF-SW100(1) 华普R-96(1) SRF-22W(1) A254(1) PR-D3L(1) 上海永华(1) 德生1994(1) 德劲1107(1)
You might like
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
javascript编程起步（第三课）
2007/02/27 Javascript
javascript 学习之旅 （1）
2009/02/05 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
python zip文件 压缩
2008/12/24 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
运动服饰每月订阅盒：Ellie
2018/04/29 全球购物
静心口服夜广告词
2014/03/20 职场文书
财务部会计岗位职责
2015/02/03 职场文书
python requests模块的使用示例
2021/04/07 Python
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL