AngularJS 表格
来源:互联网 发布:股市大数据 编辑:程序博客网 时间:2024/05/16 14:23
AngularJS 表格
ng-repeat 指令可以完美的显示表格。
在表格中显示数据
使用 angular 显示表格是非常简单的:
AngularJS 实例
<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_JSON.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
<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:nth-child(even) {
background-color: #ffffff;
}
</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 过滤器:
AngularJS 实例
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</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>
<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>
<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="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>
<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>
尝试一下 »
0 0
- AngularJS 表格
- AngularJS 表格
- AngularJS 表格
- AngularJS 表格
- AngularJS 表格
- AngularJS 表格分页
- AngularJS 表格操作
- AngularJS之表格
- AngularJS之表格序号
- AngularJS表格基本操作
- angularJS基本表格
- AngularJS表格路由
- AngularJS Scope 表格
- angularJS商品表格
- angularJs表格添加删除
- AngularJs的表格
- AngularJs实现简单表格,表单
- AngularJS之表格设置样式
- 知道这20个正则表达式,能让你少写1,000行代码
- 257. Binary Tree Paths 二叉树的路径
- "==" 和 "="你真分的开吗?
- 2016多校 1011 hdu tetrahedron
- HDU 5718 Oracle
- AngularJS 表格
- 300. Longest Increasing Subsequence最长递增子序列
- 最小覆盖问题
- 在与 SQL Server 2014建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器
- 仿米UI的ViewPagerIndicator ViewPager指示器
- shell逐行读取文件拼接Sql语句并访问数据库
- 367. Valid Perfect Square有效的平方数
- Class.forName(xxx.xx.xx) 的理解
- iOS 关于滑动返回隐藏导航栏的问题