AngularJS：表格
| ylbtech-AngularJS：表格 |
| 1.返回顶部 |
AngularJS 表格
ng-repeat 指令可以完美的显示表格。
在表格中显示数据
使用 angular 显示表格是非常简单的：
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body> <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("/try/angularjs/data/Customers_JSON.php")
.then(function (result) {
$scope.names = result.data.records;
});
});
</script>
废弃声明 (v1.5)
v1.5 中
$http的success和error方法已废弃。使用then方法替代。如果你使用的是 v1.5 以下版本，可以使用以下代码：
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("/try/angularjs/data/Customers_JSON.php")
.success(function (response) {$scope.names = response.records;});
});
Customers_JSON.php 文件代码：
<?php
echo <<<EOT
{
"records":[
{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
{"Name":"Around the Horn","City":"London","Country":"UK"},
{"Name":"B's Beverages","City":"London","Country":"UK"},
{"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
{"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
{"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},
{"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
{"Name":"Bon app'","City":"Marseille","Country":"France"},
{"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
{"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
]
}
EOT;
?>
使用 CSS 样式
为了让页面更加美观，我们可以在页面中使用CSS：
CSS 样式
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
margin: 0px; padding: 0px; color: rgb(170, 17, 17);"> #f1f1f1;
}
table tr:nth-child(even) {
margin: 0px; padding: 0px; color: rgb(170, 17, 17);"> #ffffff;
}
</style>
使用 orderBy 过滤器
排序显示，可以使用 orderBy 过滤器:
AngularJS 实例
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
使用 uppercase 过滤器
使用 uppercase 过滤器转换为大写:
AngularJS 实例
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>
显示序号 ($index)
表格显示序号可以在 <td> 中添加 $index:
AngularJS 实例
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
使用 $even 和 $odd
AngularJS 实例
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style=" margin: 0px; padding: 0px; color: rgb(17, 119, 0);">>{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style=" margin: 0px; padding: 0px; color: rgb(17, 119, 0);">>{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6.返回顶部 |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
AngularJS：表格的更多相关文章
- 【09】AngularJS 表格
AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据 使用 angular 显示表格是非常简单的: <div ng-app="myApp" ...
- 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 Bootstrap
AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...
随机推荐
- Ubuntu 16 下面的文件比较工具 Meld
安装 sudo apt-get install meld 使用 很好用,很方便.支持文件比较,文件夹比较.
- Windows下使用MinGW在命令行编译运行C++程序
之前学习C语言的时候都是用IDE类似CodeBlocks的工具写完直接编译运行的,今天突然心血来潮,自己下一个编译器,在命令行下,编译运行C++程序,了解一下编译过程. 一.安装编译器 首先你需要下载 ...
- python学习笔记（异常处理）
上次提到正则表达式 当未匹配到数据返回值 None 再使用 match.group 会出现异常 AttributeError 为了避免异常我改成“ match != None” 这次加入异常处理 #! ...
- spring mvc : 中文传值(post/get)中文乱码
请将以下代码放入 web.xml文件中,注意存放顺序,否则会报错.filter应该放在context-param后面: <!-- 字符过滤器 --> <filter> < ...
- yii2：Url::toRoute 和 ActiveForm::begin action在二级目录生成地址错误
yii2:Url::toRoute 和 ActiveForm::begin action在二级目录下生成地址错误. 正确地址: /www/super/web/wxreplay/edit-text?id ...
- 解决：夜神模拟器连不上adb的问题
一. adb devices发现不了设备 刚试了一下,在夜神模拟器开启的情况下,adb devices 死活找不到设备 adb kill-server和adb start-server也无济于事 二. ...
- GDB和Core Dump使用笔记
一.GNU C编译器(即GCC) GCC使用 1 .gcc -g hello.c -o hello 编译生成可执行文件 2.gdb hello 启动GDB ...
- Zip 压缩
ICSharpCode.SharpZipLib.dll using ICSharpCode.SharpZipLib.Zip; string[] filenames = Directory.GetFil ...
- Elasticsearch: 权威指南（官方教程）
<Elasticsearch 权威指南>中文版 序言 前言 基础入门 深入搜索 处理人类语言 聚合 地理位置 数据建模 管理.监控和部署
- 【python】类file文件处理
[flush方法] 通常由于缓冲,write不将数据写入文件,而是写入内存的缓冲区,需要使用flush写入文件,并清空缓冲区 文件的flush方法的作用是强制清空缓存写入文件.默认每行flush一下? ...