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>
运行结果：
AngularJS(6)-选择框Select的更多相关文章
- Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
- layui下拉选择框select不显示
弹层layer下拉框没有样式_不可点击_没有效果_渲染失效的解决办法 一.必须给表单体系所在的父元素加上 class="layui-form" 在一个容器中设定 class=&qu ...
- HTML、CSS小知识--兼容IE的下拉选择框select
HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...
- Bootstrap系列 -- 15. 下拉选择框select
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...
- selenium之 下拉选择框Select
今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...
- 【JavaScript&jQuery】单选框radio，复选框checkbox，下拉选择框select
HTML: <!DOCTYPE html> <html> <head> <title></title> <meta charset=& ...
- angularjs中下拉框select option默认值
1.问题说明: option ng-repeat多空白项 2.解决方案: html: <ion-view hide-nav-bar="true"> <ion-co ...
- Bootstrap系列 -- 15. 下拉选择框select【转发】
<form role="form"> <div class="form-group"> <select class="f ...
- AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和 ...
随机推荐
- 结构体定义 typedef struct 用法详解和用法小结
typedef是类型定义的意思.typedef struct 是为了使用这个结构体方便.具体区别在于:若struct node {}这样来定义结构体的话.在申请node 的变量时,需要这样写,stru ...
- C#_Jquery无刷新上传
昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...
- 小白日记26：kali渗透测试之提权（六）--收集敏感信息，隐藏痕迹
提权后操作 提权之后,要收集目标系统的重要信息LINUX /etc/resolv.conf #查看DNS配置,是否可以进行DNS篡改或劫持 /etc/passwd #存放账 ...
- C语言第二节概述
学前提醒 其实iOS开发就是开发iPhone\iPad上的软件,而要想开发一款软件,首先要学习程序设计语言 iOS开发需要学习的主要程序设计语言有:C语言.C++.Objective-C,其中C++. ...
- 引用自定义的framework
关于静态库引用文件 如果希望你的工程能在未来能导出成静态库,那么在你编写的时候要遵循静态库引用原则,使用这种方式. 注意:这种引用方式必须在你的Products下静态库成黑色时候,才能编译通过. 使用 ...
- [改善Java代码]警惕泛型是不能协变和逆变的
什么叫做协变(covariance)和逆变(contravariance)? 在变成语言的类型框架中,协变和逆变是指宽类型和窄类型在某种情况下(如参数,泛型,返回值)替换或交换的特性,简单的说,协变是 ...
- PE制作实录 —— 补充说明
上一篇博文中我提到了定制 PE 合盘的方法,可能还有一些朋友不是很懂,这里补充几点. 要点1: 菜单的排布 U盘启动时的界面,这里叫做主界面,而主界面下有时还会用到子界面,下面是我制作的PE的菜单目录 ...
- 关于Merge的整理--AndroidScreenSlidePager开源库中用到的
在做AndroidScreenSlidePager开源库练习demo的时候,发现布局文件使用的是<merge>标签而不是<FrameLayout>标签.作者给出的说法是:Cir ...
- c#语法笔记
书写代码需要注意的地方: 1.代码中出现的所有标点都是英文半角 shift键快速切换中文半角和英文半角 shift+空格 切换全角/半角 2.在c#代码中,每行代码的结束,我们都以分号结束,注意:这个 ...
- toggle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...