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 指令来创建一个下拉列表,列表项通过对象和 ...
随机推荐
- Android之自定义AlertDialog无法监听控件
参考:http://www.cnblogs.com/511mr/archive/2011/10/21/2220253.html 要做一个自定义的弹出框,以前都是用一个Activity来实现,总觉得不是 ...
- oracle 设置标识列自增
设置reg_user表 userid为自增列 1.设置键 2.创建序列 3.创建触发器
- 在Flex4中使用RemoteObjectAMF0来连接fluorine网关 转
转http://vipnews.csdn.net/newscontent.aspx?pointid=2011_04_21_142132661 RemoteObjectAMF0是一个开源组件,可以很方便 ...
- [BigData]关于Hadoop学习笔记第四天(PPT总结)(一)
课程安排 Partitioner编程** 自定义排序编程** Combiner编程** 常见的MapReduce算法** ---------------------------加深拓展-------- ...
- hdu 1394 树状数组
思路:从后面往前面统计,每次先sum+=Sum(num[i]+1),然后在update(num[i]+1,1).这样每次Sum每次加的个数就是num[i]的逆序对个数. 每次从队首调一个元素到队尾,逆 ...
- 设计模式——java
设计模式:一个程序员对设计模式的理解:“不懂”为什么要把很简单的东西搞得那么复杂.后来随着软件开发经验的增加才开始明白我所看到的“复杂”恰恰就是设计模式的精髓所在,我所理解的“简单”就是一把钥匙开一把 ...
- CSS组件化思考
为什么组件化? 分层设计,代码复用,减少冗余: 维护方便,弹性好: 如何组件化? 目前代码分成三级: 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css): ...
- CXF(2.7.10) - A simple JAX-WS service
1. 下载 apache-cxf-x.x.x.zip,在工程导入依赖的 jar 包.也可以基于 Maven 构建工程. 2. 定义服务接口. package com.huey.demo.ws; imp ...
- Spring(3.2.3) - Beans(10): 生命周期
Spring 容器可以管理 singleton 作用域 Bean 的生命周期,容器能够跟踪 Bean 实例的创建.销毁.管理 Bean 生命周期行为主要有两个时机: 注入 Bean 的依赖关系之后 即 ...
- C#算法基础之递归排序
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...