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

2024-11-29 15:39:04

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>

运行结果：

Google
Runoob
Taobao

该实例演示了 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>

运行结果：

Google
Runoob
Taobao

该实例演示了使用 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>

运行效果：

选择网站：

Google
Runoob
Taobao

你选择的是：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
Runoob
Taobao

你选择的是：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>

运行效果：

选择的网站是：

site01
site02
site03

你选择的值是：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>

运行结果：

选择一辆车

car01
car02
car03

你选择的是： 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
Fiat
Volvo

你选择的是： Ford

型号为：Mustang

颜色为： red

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

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

AngularJS基础 ng-selected 指令简单示例

AngularJS ng-selected 指令 AngularJS 实例获取选中的选项: 点击复选框选择 BMW 选项: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
AngularJS service之select下拉菜单效果

本文实例为大家分享了service之select下拉菜单效果的具体代码,供大家参考,具体内容如下  <!DOCTYPE html> <html lang="en" ng-app="myApp" ng-controller="myCtrl"> <head> <meta charset="utf-8"> <
AngularJS select设置默认值的实现方法

AngularJS的select设置默认值在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-app="noteApp" ng-controller="noteCtrl"> <head> <meta http-equiv="keywords" content="keyword1,keyword2,keyword
AngularJS Select(选择框)使用详解

1.Select概述 AngularJS 中可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出 <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"> </select> </div> <
Angularjs实现带查找筛选功能的select下拉框示例代码

前言对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功
angularjs的select使用及默认选中设置

我最近在研究angularjs学习的道路上,那么今天也算个学习笔记吧! 1 ng-model="standardCourse.showHours"代替name 2 ng-selected = "1"代替selected="selected",但问题是select下会多出一个无用的option 3 在数据准备时设置,$scope.standardCourse.showHours= '1'; 解决多出的一个无用的option <label fo
angularjs 实现带查找筛选功能的select下拉框实例

一.背景对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析: 目标在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele
AngularJS实现select的ng-options功能示例

本文实例讲述了AngularJS实现select的ng-options功能.分享给大家供大家参考,具体如下: controller .controller('MainController', function($scope, $http, $ionicModal, $timeout) { var post = {}; $http.get("data/themeData.json") .success(function(response) { $scope.themeData = res
AngularJS入门教程之Select(选择框)详解

AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-options 创建选择框在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://a
AngularJS 入门教程之HTML DOM实例详解

AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bd
Zend Framework入门教程之Zend_Session会话操作详解

本文实例讲述了Zend Framework入门教程之Zend_Session会话操作.分享给大家供大家参考,具体如下: 会话命名空间实现会话代码: <?php require_once "Zend/Session/Namespace.php"; $myNamespace = new Zend_Session_Namespace('Myspace'); if(isset($myNamespace->numberOfPageRequests)) { $myNamespace
Zend Framework入门教程之Zend_Db数据库操作详解

本文实例讲述了Zend Framework中Zend_Db数据库操作方法.分享给大家供大家参考,具体如下: 引言:Zend操作数据库通过Zend_Db_Adapter 它可以连接多种数据库,可以是DB2数据库.MySQli数据库.Oracle数据库.等等. 只需要配置相应的参数就可以了. 下面通过案例来展示一下其连接数据库的过程. 连接mysql数据库代码: <?php require_once 'Zend/Db.php'; $params = array('host'=>'127.0.0.
Zend Framework入门教程之Zend_Registry组件用法详解

本文实例讲述了Zend Framework中Zend_Registry组件用法.分享给大家供大家参考,具体如下: 1.对象注册表入门案例: <?php require_once("Zend/Loader.php"); Zend_Loader::loadClass('Zend_Registry'); $member = array( "姓名"=>"张三", "性别"=>"女", "
Zend Framework入门教程之Zend_Config组件用法详解

本文实例讲述了Zend Framework中Zend_Config组件用法.分享给大家供大家参考,具体如下: 1.从PHP数组中读取数据使用Zend_Config_Ini(读取ini配置文件) Zend_Config_Xml(读取XML配置文件) 案例: <?php require_once("Zend/Loader.php"); Zend_Loader::loadClass('Zend_Config'); $array = array( 'webhost' => '12
ES6入门教程之Class和Module详解

本文主要介绍了ES6中Class和Module的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.Class ES6引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. // 定义类 class Point() { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } var point = new
AngularJS入门教程之AngularJS表达式

表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. AngularJS表达式格式 : {{expression }} AngularJS表达式可以是字符串.数字.运算符和变量数字运算{{1 + 5}} 字符串连接{{ 'abc' + 'bcd' }} 变量运算 {{ firstName + " " + lastName }}
AngularJS入门教程之Helloworld示例

本文实例讲述了AngularJS入门教程之Helloworld示例.分享给大家供大家参考,具体如下: 什么是AngularJs? angularjs是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用数据绑定和依赖注入,它使你不用再写大量的代码了.这些全都通过浏览器端的javascript实现,这也使得它能够完美地和任何服务器技术结合. AngularJS简单的Helloworld例子: <!D
AngularJS入门教程之AngularJS模型

相关阅读: AngularJS入门教程之AngularJS表达式 AngularJS入门教程之AngularJS指令在前面表达式和指令的教程中了解到,AngularJS模型(ng-model)可以将HTML输入域中的值与AngularJS创建的变量绑定. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.

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

相关推荐

随机推荐