【09】AngularJS 表格
AngularJS 表格
ng-repeat 指令可以完美的显示表格。
在表格中显示数据
使用 angular 显示表格是非常简单的:
<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("test.php")
.success(function(response){$scope.names = response.records;});
});
</script>
使用 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:nth-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>
【09】AngularJS 表格的更多相关文章
- AngularJS 表格
ng-repeat 指令可以完美的显示表格. 使用 angular 显示表格是非常简单的: <!DOCTYPE html> <html> <head> <me ...
- AngularJS表格神器“ui-grid”的应用
HTML: (代码仅用于解释得更清楚,并未完全展示) <!doctype html> <html ng-app="app"> <head> & ...
- angularJs表格效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- Angularjs 表格插件的使用
对于相关的table组件可以使用:UI Grid (ng-grid),ng-table,smart table,Angular-Datatables,tablelite,kendo-ui中的grid. ...
- angularjs表格方式显示数据
<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td&g ...
- AngularJS表格排序
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- AngularJS 表格(带有CSS样式)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- AngularJS:表格
ylbtech-AngularJS:表格 1.返回顶部 1. AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据 使用 angular 显示表格是非常简单的: A ...
- AngularJS Bootstrap
AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...
随机推荐
- HTML5中File
一 File对象与FileList对象 当将input元素的type类型设置为file时,web页面上会显示一个选择文本按钮和一个文本显示框,单击文件按钮可以选择一个文件,文本显示框中会显示选中的文件 ...
- F5 SSLVPN 的安装问题
WIN10下安装SSLVPN问题 1.右击计算机 -->选择管理-->查看安装的插件是否显示感叹号 2.如果显示感叹号-->则进行更新驱动-->>手动选择-->网络 ...
- bzoj 1492: [NOI2007]货币兑换Cash【贪心+斜率优化dp+cdq】
参考:http://www.cnblogs.com/lidaxin/p/5240220.html 虽然splay会方便很多,但是懒得写,于是写了cdq 首先要想到贪心的思路,因为如果在某天买入是能得到 ...
- redis之简单动态字符串(SDS)
O(N):时间复杂度 N的值越大 时间复杂度随N的平方增大 O(1):就是说N很大的时候,复杂度基本不增长了.基本就是常量了. 在Redis数据库里 包含字符串值的键值对 在底层都是由SDS实现的. ...
- (DP)51NOD 1049 最大子段和
N个整数组成的序列a[1],a[2],a[3],…,a[n],求该序列如a[i]+a[i+1]+…+a[j]的连续子段和的最大值.当所给的整数均为负数时和为0. 例如:-2,11,-4,13,-5 ...
- 2017杭电多校第七场1005Euler theorem
Euler theorem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Others) ...
- SqlServer学习-常用的sql语句-持续更新中
1.获取数据库下的所有表名 select TABLE_NAME from information_schema.tables where TABLE_TYPE='Base TABLE' 2.随机取出1 ...
- sed -i 报错的情况
是因为替换的变量中带/的目录名 将原来的/改成#
- Python多线程爬图&Scrapy框架爬图
一.背景 对于日常Python爬虫由于效率问题,本次测试使用多线程和Scrapy框架来实现抓取斗图啦表情.由于IO操作不使用CPU,对于IO密集(磁盘IO/网络IO/人机交互IO)型适合用多线程,对于 ...
- Verification Mind Games---how to think like a verifier像验证工程师一样思考
1. 有效的验证需要验证工程师使用不同于设计者的思维方式思考问题.具体来说,验证更加关心在严格遵循协议的基础上发现设计里面的bug,搜索corner cases,对设计的不一致要保持零容忍的态度. m ...