首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AngularJS系列(六)——表格

AngularJS系列(六)——表格

作者头像
逝兮诚
发布2019-10-30 17:59:15
5170
发布2019-10-30 17:59:15
举报
文章被收录于专栏:代码人生代码人生

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

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

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

基本显示

<div ng-app="myApp"ng-controller="customersCtrl">
         <table>
                   <trng-repeat="x in customers">
                            <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("/try/angularjs/data/Customers_JSON.php").then(function(response) {
                   $scope.customers= response.data.records;
         })
});
</script>

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

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

<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>
<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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-09-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基本显示
  • 加样式,加序号,按'Country’排序,’Country’大写
  • 使用 $even 和 $odd判断
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档