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资料的整理,后续继续补充,希望能帮助有需要的朋友。

Javascript 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
jQuery 改变CSS样式基础代码
Feb 11 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
js检测用户输入密码强度
Oct 22 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 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
You might like
php中jpgraph类库的使用介绍
2013/08/08 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
php实现文章评论系统
2019/02/18 PHP
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
使用django实现一个代码发布系统
2019/07/18 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
新书发布会策划方案
2014/06/09 职场文书
世博会口号
2014/06/20 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
信访维稳工作汇报
2014/10/27 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
上诉答辩状范文
2015/05/22 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书