AngularJS 學習之表格

標籤：function   customers   image   ctr   erb   record   images   var   add   

1.ng-repeat指令可以完美的顯示表格；

2.在表格中顯示資料：

<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>

 

 

3.使用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>

 

4.使用orderBy過濾器：排序顯示，可以使用orderBy過濾器;

<table>

　　<tr ng-repeat="x in names | orderBy:‘Country‘">

　　<td>{{x.Name}}</td>

　　<td>{{x.Country}}</td>

　　</tr>

</table>

 

5.使用uppercase過濾器轉換為大寫：

<table>

　　<tr ng-repeat="x in names">

　　　　<td>{{x.Name}}</td>

　　　　<td>{{x.Country | uppercase }}</td>　

　　</tr>

</table>

 

6.顯示序號($index):表格顯示序號可以在<td>中添加$index;

<table>

　　<tr ng-repeat="x in names">

　　　　<td>{{$index+1}}</td>

　　　　<td>{{x.Name}}</td>

　　　　<td>{{x.Country}}</td>

　　</tr>

</table>

 

 

7.使用$even和$odd:

<table>

<tr ng-repeat="x in names">

<td ng-if="$odd" style="background-color:#f1f1f1">{{x.Country}}</td>

<td ng-if="$even">{{x.Name}}</td>

<td ng-if="$odd" style="backgrund-color:#f1f1f1">{{x.Country}}</td>

<td ng-if="$even">{{x.Country}}</td>

</tr>

</table>

 

AngularJS 學習之表格