码迷,mamicode.com
首页 > Web开发 > 详细

【09】AngularJS 表格

时间:2016-02-22 16:48:35      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

AngularJS 表格


ng-repeat 指令可以完美的显示表格。


在表格中显示数据

使用 angular 显示表格是非常简单的:

  1. <div ng-app="myApp" ng-controller="customersCtrl">
  2. <table>
  3. <tr ng-repeat="x in names">
  4. <td>{{ x.Name}}</td>
  5. <td>{{ x.Country}}</td>
  6. </tr>
  7. </table>
  8. </div>
  9. <script>
  10. var app = angular.module(‘myApp‘,[]);
  11. app.controller(‘customersCtrl‘,function($scope, $http){
  12. $http.get("test.php")
  13. .success(function(response){$scope.names = response.records;});
  14. });
  15. </script>
 
moyu:
 
技术分享

使用 CSS 样式

为了让页面更加美观,我们可以在页面中使用CSS:

  1. <style>
  2. table, th , td {
  3. border:1px solid grey;
  4. border-collapse: collapse;
  5. padding:5px;
  6. }
  7. table tr:nth-child(odd){
  8. background-color:#f1f1f1;
  9. }
  10. table tr:nth-child(even){
  11. background-color:#ffffff;
  12. }
  13. </style>
结果:
技术分享

使用 orderBy 过滤器

排序显示,可以使用 orderBy 过滤器: 

  1. <table>
  2. <tr ng-repeat="x in names | orderBy : ‘Country‘">
  3. <td>{{ x.Name}}</td>
  4. <td>{{ x.Country}}</td>
  5. </tr>
  6. </table>
结果:
技术分享

使用 uppercase 过滤器

使用 uppercase 过滤器转换为大写: 

  1. <table>
  2. <tr ng-repeat="x in names">
  3. <td>{{ x.Name}}</td>
  4. <td>{{ x.Country| uppercase }}</td>
  5. </tr>
  6. </table>
结果:
技术分享

显示序号 ($index)

表格显示序号可以在 <td> 中添加 $index

  1. <table>
  2. <tr ng-repeat="x in names">
  3. <td>{{ $index +1}}</td>
  4. <td>{{ x.Name}}</td>
  5. <td>{{ x.Country}}</td>
  6. </tr>
  7. </table>
魔芋结果:
技术分享

使用 $even 和 $odd

  1. <table>
  2. <tr ng-repeat="x in names">
  3. <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name}}</td>
  4. <td ng-if="$even">{{ x.Name}}</td>
  5. <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country}}</td>
  6. <td ng-if="$even">{{ x.Country}}</td>
  7. </tr>
  8. </table>
结果:
技术分享





【09】AngularJS 表格

标签:

原文地址:http://www.cnblogs.com/moyuling/p/5207194.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!