AngularJS(6)-选择框Select

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择框Select</title><script src="angular-1.4.1/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 = ["谷歌","百度","搜狗"];});</script>
</body>
</html>

运行结果:　　

用ng-option加载列表：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择框Select</title><script src="angular-1.4.1/angular.min.js"></script><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope) {$scope.sites = [{site:"谷歌",url:"http:www.google.com"},{site:"百度",url:"http:www.baidu.com"},{site:"搜狗",url:"http:www.sogou.com"}];});</script>
</head>
<body><div ng-app="myApp" ng-controller="customersCtrl"><select ng-model="selectedSite" ng-options="x.site for x in sites"></select><h1>你选择的内容如下:</h1><p>名字:{{selectedSite.site}}</p><p>网址为:{{selectedSite.url}}</p></div>
</body>
</html>

运行结果：

用ng-repeat加载列表数据也可以但是有局限性，选择的是一个字符串：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择框Select</title><script src="angular-1.4.1/angular.min.js"></script><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope) {$scope.sites = [{site:"谷歌",url:"http:www.google.com"},{site:"百度",url:"http:www.baidu.com"},{site:"搜狗",url:"http:www.sogou.com"}];});</script>
</head>
<body><div ng-app="myApp" ng-controller="customersCtrl"><select ng-model="selectedSite"><option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option></select><h1>你选择的内容是:{{selectedSite}}</h1></div>
</body>
</html>

　　运行结果：

ng-options使用对象有很大的不同，使用对象作为数据源, x 为键(key), y 为值(value),select控件ng-options表示控件的值是什么，然后ng-model绑定了数据对应的数据源：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择框Select</title><script src="angular-1.4.1/angular.min.js"></script><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope) {$scope.sites = {site01 : "Google",site02 : "Runoob",site03 : "Taobao"};});</script>
</head>
<body><div ng-app="myApp" ng-controller="customersCtrl"><select ng-model="selectedSite" ng-options="x for (x, y) in sites"></select>你选择的是:{{selectedSite}}</div>
</body>
</html>

　　运行结果你选择的值为在 key-value 对中的 value。

此外value 在 key-value 对中也可以是个对象：选择的值在 key-value 对的 value 中, 这是它是一个对象:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择框Select</title><script src="angular-1.4.1/angular.min.js"></script><script>var app = angular.module('myApp', []);app.controller('customersCtrl', 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>
</head>
<body><div ng-app="myApp" ng-controller="customersCtrl"><select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>你选择的是:{{selectedCar}}</div>
</body>
</html>

　　运行结果：

转载于:https://www.cnblogs.com/yk123/p/5912429.html

AngularJS(6)-选择框Select相关推荐

Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
layui table勾选框的修改_layui表格(Table)下添加可更新拉选择框select
添加CSS 防止下拉框被遮挡 /* 防止下拉框下拉值被遮盖*/ .layui-table-cell { overflow: visible; } .layui-table-box { overflow ...
[jQuery]选择框(select),多选取值(multiple)
多选下是添加multiple的option,按照一般做法只能取第一个,因此需要遍历一个selected. jQuery下,返回一个字符串: function getMsgDelStaValue() { ...
AngularJs 基础教程 —— Select(选择框)
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:AngularJs 基础教程 -- Select(选择框) Angula ...
AngularJS Select(选择框)
在AngularJS中可以使用数组或对象创建一个下拉列表对象选项. 1.使用ng-options创建选择框 <div ng-app="my" ng-controller=&q ...
python select模块安装_python+selenium select下拉选择框定位处理方法
一.前言总结一下python+selenium select下拉选择框定位处理的两种方式,以备后续使用时查询: 二.直接定位(XPath) 使用Firebug找到需要定位到的元素,直接右键复制XPa ...
select选择框实现跳转
select选择框实现跳转零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...
Js选择框脚本移动操作select 标签中的 option 项的操作事项
题目:在窗体中有两个多选列表,用户可以从左侧列表中选择任意项,添加到右侧列表中.反之亦然.如下: 在窗体中有两个多选列表,用户可以从左侧列表中选择任意项,添加到右侧列表中.反之亦然. 此问题需用到选择 ...
手动清空Element Select选择框内容 v-model 和 option下拉框选项导致无法select选中，或者选中视图不渲染问题,
有时候一些需求,需要上下两个Select 进行联动,比如名称/id选择框的内容需要根据科目选中后的内容,来进行搜索,所以当科目清空后名称/ID 需要清空 v-model 的值.以及 el-op ...

AngularJS(6)-选择框Select

AngularJS(6)-选择框Select相关推荐

最新文章

热门文章