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

使用 ng-option 创建选择框

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.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-option与ng-repeat：

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.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-option与ng-repeat用哪一个来做选择框更好呢？我们倾向于使用ng-option，因为ng-repeat有局限性，选择的值是一个字符串，而使用 ng-options 指令，选择的值是一个对象，当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

以下为二者的实例对比：

假设我们使用如下数据：

$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:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.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>

使用 ng-options:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.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>

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

$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://cdn.static.runoob.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>

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.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>

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.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>

AngularJS Select(选择框)的更多相关文章

  1. AngularJS初始化Select选择框

    一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...

  2. Notes: select选择框

    HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...

  3. 类似 select 选择框效果及美化

    网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...

  4. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...

  5. select选择框在谷歌火狐和IE样式的不同

    select选择在不同浏览器不同的显示样式, 在IE中 虽然默认和谷歌一样,但是当点击时向下 按钮消失, 解决方法如下: select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...

  6. Chosen：Select 选择框的华丽变身

    HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...

  7. select选择框实现跳转

    select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...

  8. iiview Select 选择框打勾选中的内容label和展示的不一致

    Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少  :label-in-value="true";官方文档 ...

  9. AngularJS(6)-选择框Select

    1.在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出 <!DOCTYPE html> <html lang=" ...

随机推荐

  1. Spring配置文件中别名的使用

    id是bean的唯一标识符号,若没有Id那么name为默认标识符号 如果配置了id又配置了name,那么name为别名,别名可以配置多个,这些别名用逗号.空格等隔开. 还可以通过<alias n ...

  2. easyui 汇总

    1. easyui datagrid 表格组件列属性 formatter columns:{ { field:' product', title:'商品', align:'center', width ...

  3. php 5.4中php-fpm 的重启、终止操作命令

    php 5.4中php-fpm 的重启.终止操作命令: 查看php运行目录命令:which php/usr/bin/php 查看php-fpm进程数:ps aux | grep -c php-fpm ...

  4. 【原】十张javascript思维导图

    下面附上十张javascript思维导图,如果把里面的内容全部掌握,那就是高手了.思维导图提供给我们一个整体的知识体系,也可以说是一种工具,废话不多说,上图: 1.javascript数据类型 2.j ...

  5. 浅谈Android下的Bitmap之大Bitmap加载

    引言 我们常常提到的“Android程序优化”,通常指的是性能和内存的优化,即:更快的响应速度,更低的内存占用.Android程序的性能和内存问题,大部分都和图片紧密相关,而图片的加载在很多情况下很用 ...

  6. windows 10卸载自带软件

    http://jingyan.baidu.com/article/14bd256e4ad268bb6c26126d.html http://jingyan.baidu.com/album/ae97a6 ...

  7. Mac Pro 资源管理器 Double Commander“个性化设置” 备份

    操作系统自带的资源管理器,总是有些别扭的地方,在 Windows 系统下,我一般用 Total Commander(破解版)来作为替代品.现在换为 Mac 系统,自带的 Finer 也不怎么好用,连最 ...

  8. 【荐】PHP上传文件大小限制大全

    在php.ini里面可以设置最大上传文件大小 解决方法: 第一: 在php.ini里面查看如下行: upload_max_filesize = 8M post_max_size = 10M memor ...

  9. 【Alpha版本】 第三天 11.9

    一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 注册界面的实现 填写招聘时用户填写各个日期到可以使用工具方便选择日 ...

  10. MFC 鼠标 移动到某控件时 修改鼠标形状为手的形状

    响应窗体的 OnSetCursor 消息响应 鼠标移动到某空间时改变 形状 BOOL CQQBulkDlg::OnSetCursor(CWnd* pWnd, UINT nHitTest, UINT m ...