客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
AngularJS 表格本节介绍了显示 AngularJS 表格的方法。
ng-repeat 指令可以完美的显示表格。 在表格中显示数据使用 angular 显示表格是非常简单的： AngularJS 实例<div ng-app="" ng-controller="customersController">
<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> function customersController($scope,$http) { $http.get("/statics/demosource/Customers_JSON.php") .success(function(response) {$scope.names = response;}); } </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) { 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> 尝试一下 » 使用 uppercase 过滤器如果字母要转换为大写，可以添加 uppercase 过滤器: AngularJS 实例<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>  |
请发表评论