Angularjs基础(五)
AngularJS Select(选项框)
AngularJS 可是使用数组或对象创建一个下拉列表选项。
使用ng-options创建选项框
在AngularJS 中我们可以使用ng-option指令来创建一个下拉列表,列表通过对象和数组循环输出
实例:
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for in names"></select>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.name = ["Google","Runoob","Taobao"];
})
</script>
ng-options 与 ng-repeat
我们也可以使用ng-repeat指令来创建下拉列表
<select>
<option ng-repeat="x in name">{{x}}</option>
</select>
ng-repeat指令是通过数组来循环HTML 代码来创建下拉列表,但ng-options指令更适合创建下拉列表,它有一下优势
使用ng-options的选项的一个对象,ng-repeat是一个字符串。
应该用那个更好?
假设我们使用以下对象:
$scope.sites = [{site : "Google",url:"http://www.google.com"},
$scope.sites = [{site : "Runoob",url:"http://www.runoob.com"},
$scope.sites = [{site : "Taobao",url:"http://www.runoob.com"}]
ng-repeat有局限性,选择的值是一个字符串:
实例:
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x,url}}">{{x.site}}</option>
</select>
<h1>你选择的是:{{selectedSite}}</h1>
实例:
使用ng-options:
<select ng-model="selectedSite" ng-options="x.site for x in sites"></select>
<h1>你选择的是:{{selectedSite.site}}</h1>
<p>网址为:{{selectedSite.url}}</p>
当选择值是一个对象时,我们就可以获取更多信息,应用也更灵活。
数据源为对象
前面实例我们使用了数组作为数据源,以下我们将数据对象作为数据源。
$scope.sites = {
site01 :"Google",
site02:"Runoob",
site03 :"Taobao"
};
实例
使用对象作为数据源,x 为键(key),y为值(value);
<select ng-model="selectedSite" ng-options="x for (x,y) in sites">
</select>
<h1>你选择的值是:{{selectedSite}}</h1>
你选择的值在key-value对中的value
value 在key-value 对中也可以是个对象;
实例
选择的值在key-value 对的value 中,这是 它是一个对象。
$scope.cars = {
car01 : {brand : "Ford",model :"Mustang", color :"red"},
car02 : {brand : "Fiat",model :"500", color :"white"},
car03 : {brand : "Fiat",model :"XC90", color :"black"},
}
在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性:
<select ng-model="selectedCar" ng-options="y.brand for (x,y) in sites "></select>
AngularJS 表格
ng-repeat 指令可以完美的显示表格。
在表格中显示数据
使用angular显示表格是非常简单的
实例
<div ng-myApp="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat = "x in names">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
</div>
<script>
var app= angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$http){
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php").
success(function (response) {$scope.names = response.records;});
})
</script>
使用CSS样式
为了让页面更加美观,我们可以在页面中使用CSS
css 样式
<style>
table, th ,td{
border:1px solid grey;
border-collapse:collapse;
padding:5px;
}
table tr:nth-child(odd){
background-color:#f1f1f1;
}
table tr:nath-child(even){
background-color:#ffffff;
}
</style>
使用 orderBy 过滤器
排序显示,可以使用orderBy过滤器:
实例:
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
使用uppercase 过滤器
使用uppercase过滤器转换为大写
实例
<table>
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.Country | uppercase}}</td>
</tr>
</table>
显示序号($index)
表格显示序号可以在<td>中添加$index:
实例
<table>
<tr ng-repeat="x in names">
<td>{{$index + 1}}</td>
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
使用$even 和$odd
实例
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{x.Name}}</td>
<td ng-if="$even">{{x.Name}}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{x.Country}}</td>
<td ng-if="$even">{{x.Country}}</td>
</tr>
</table>
AngularJS SQL
使用PHP从MySQL 中获取数据
实例:
<div ng-app ="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$http){
$http.get("http://www.runoob.com/try/angularjs/data/Customers_MySQL.php")
.success(function (response) {$scope.names = response.records;});
})
</script>
跨域HTTP请求
如果你需要从不同的服务器(不同的域名)上获取数据就需要使用跨域HTTP请求。
跨域请求在网页上非常常见。很多网页从不同服务器上载入CSS,图片,Js 脚本等。
在现代浏览器中,为了数据的安全,所又请求被严格限制在同一域名下,如果需要调用不同站点数据,需要通过跨域来解决。
以下的PHP代码运行使用的网站进行跨域访问。
header("Access-Control-Allow-Origin: *");
Angularjs基础(五)的更多相关文章
- AngularJS基础入门初探
一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
- Bootstrap <基础五>表格
Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...
- C#_02.14_基础五_.NET类
C#_02.14_基础五_.NET类 一.类实例: 我们前面说过类是一个模板,我们通过类创建一个又一个的实例,通常情况下类当中的变量是每一个实例都各有一份的,互相不影响,而静态字段是除外的,静态字段是 ...
- day 70 Django基础五之django模型层(二)多表操作
Django基础五之django模型层(二)多表操作 本节目录 一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询.分组查询.F查询和Q查询 六 ORM ...
- day 69 Django基础五之django模型层(一)单表操作
Django基础五之django模型层(一)单表操作 本节目录 一 ORM简介 二 单表操作 三 章节作业 四 xxx 一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现 ...
- day 57 Django基础五之django模型层之关联管理器
Django基础五之django模型层之关联管理器 class RelatedManager "关联管理器"是在一对多或者多对多的关联上下文中使用的管理器.它存在于下面两种情况 ...
- day 56 Django基础五之django模型层(二)多表操作
Django基础五之django模型层(二)多表操作 本节目录 一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询.分组查询.F查询和Q查询 六 ORM ...
- day 55 Django基础五之django模型层(一)单表操作
Django基础五之django模型层(一)单表操作 本节目录 一 ORM简介 二 单表操作 三 章节作业 四 xxx 一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它 ...
- Django基础五之Ajax
Django基础五之Ajax 目录 Django基础五之Ajax 1. Ajax介绍 2. Ajax前后端传值 2.1 方法一HttpResponse直接返回 2.2 方法二使用Json格式返回 2. ...
随机推荐
- js使用占位符替换字符串
js使用占位符替换字符串是一个ES6中的模版字符串语法. 在``中使用 ${} var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and ...
- win10 MySQL8.0 zip包安装及问题解决
1.在官网下载zip包 https://dev.mysql.com/downloads/mysql/ 2.将zip包解压到自己的工作目录中 3.配置环境变量 1)添加环境变量 MYSQL_HOME E ...
- WSAAsyncSelect 消息模型
select 模型虽然可以管理多个socket,但是它涉及到一个时机的问题,select模型会针对所管理的数组中的每一个socket循环检测它管理是否在对应的数组中,从时间复杂度上来说它是O(n^2) ...
- js原生拖拽
style样式 <style type="text/css"> #box{ width: 100px; height: 100px; background: deepp ...
- javascript实现数据结构: 串的块链存储表示
和线性表的链式存储结构相类似,也可采用链式方式存储串值.由于串结构的特殊性--结构中的每个数据元素是一个字符,则用链表存储串值时,存在一个“结点大小”的问题,即每个结点可以存放一个字符,也可以存放多个 ...
- 22_AOP_切面——静态切面
[Spring AOP 如何定位连接点] 1.增强提供了连接点的方位信息:如织入到方法前面.后面等. 2.切点描述的是织入到哪些类的哪些方法上. [切点] Spring通过org.springfram ...
- vs2010的帮助文档
系统重装了,发现vs2010的帮助无论如何都是web方式,这种体验很差劲. google了才明白,原来是ms发展过程的一个败笔. 需要升级到vs2010 sp1才会有跟以前一样的帮助系统. 彻底无语了 ...
- sqlServer拼结列字符串
with table1(sessionID,message,createTime)as(select 1 ,'hello' ,'2014/5/6' union allselect 1 ,'word' ...
- mac nvm install
open the url https://github.com/creationix/nvm 1. curl -o- https://raw.githubusercontent.com/creatio ...
- Blob, Uint8Aray, atob/btoa in lt IE9 browser
Blob, Uint8Aray, atob/btoa in lt IE9 browser 标签(空格分隔): compatibility 之前写的代码全部在Chrome调试,用IE打开发现各种问题. ...