AngularJS系列(六)——表格

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/luo4105/article/details/77895260

用ng-repeat显示表格十分方便容易

基本显示

代码语言：javascript复制

<div ng-app="myApp"ng-controller="customersCtrl">
         <table>
                   <trng-repeat="x in customers">
                            <td>{{x.Name}}</td>
                            <td>{{x.Country}}</td>
                   </tr>
         </table>
</div>

代码语言：javascript复制

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope,$http) {
   $http.get("/try/angularjs/data/Customers_JSON.php").then(function(response) {
                   $scope.customers= response.data.records;
         })
});
</script>

加样式，加序号，按'Country’排序，’Country’大写

代码语言：javascript复制

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

代码语言：javascript复制

<div ng-app="myApp"ng-controller="customersCtrl">
<table>
 <tr ng-repeat="x in names | orderBy:'Country'">
         <td>{{$index  1}}</td>
   <td>{{ x.Name }}</td>
   <td>{{ x.Country | uppercase}}</td>
 </tr>
</table>
</div>

代码语言：javascript复制

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl',function($scope, $http) {
   $http.get("/try/angularjs/data/Customers_JSON.php")
   .then(function (result) {
       $scope.names = result.data.records;
   });
});
</script>

使用 $even 和 $odd判断

代码语言：javascript复制

<div ng-app="myApp"ng-controller="customersCtrl">
<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>
</div>

代码语言：javascript复制

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl',function($scope, $http) {
   $http.get("/try/angularjs/data/Customers_JSON.php")
   .then(function (result) {
       $scope.names = result.data.records;
   });
});
</script>

repeat 表格 排序 协议

0 人点赞