【AngularJS 学习笔记】AngularJS 表格

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

一、在表格中显示数据

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

 


  

    
{{ x.Name }}
    
{{ x.Country }}
  

在线编辑运行 

废弃声明 (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 文件代码： 

二、使用 CSS 样式

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

 


  

    
{{ x.Name }}
    
{{ x.Country }}
  

 在线编辑运行

 

三、使用 orderBy 过滤器

    排序显示，可以使用 orderBy 过滤器：

 


  

    
{{ x.Name }}
    
{{ x.Country }}
  

在线编辑运行

四、使用 uppercase 过滤器

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

 


  

    
{{ x.Name }}
    
{{ x.Country | uppercase }}
  

现在运行编辑

 

五、显示序号 ($index)

    表格显示序号可以在 中添加 $index：

 


  

    
{{ $index + 1 }}
    
{{ x.Name }}
    
{{ x.Country }}
  

在线编辑运行 

六、使用 $even 和 $odd

 


  

    

    {{ x.Name }}
    

    {{ x.Name }}
    

    {{ x.Country }}
    

    {{ x.Country }}
  

在线编辑运行

 

 

  转载来源：https://www.runoob.com/angularjs/angularjs-tables.html

  版权说明：如有侵权，联系删除