AngularJS(7)-表格

最新推荐文章于 2024-05-24 09:56:19 发布

weixin_33716557

最新推荐文章于 2024-05-24 09:56:19 发布

阅读量454

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yk123/p/5912459.html

版权

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择框Select</title>
    <script src="angular-1.4.1/angular.min.js"></script>
    <!--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>
    <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>
</head>
<body>
  <div ng-app="myApp" ng-controller="customersCtrl">
      <table>
          <tr ng-repeat="x in names|orderBy:'Country'">//使用过滤器orderBy按某一个字段排序
              <td>{{$index+1}}</td>//表格显示序号可以在<td>中添加$index
              <td ng-if="$even" style="background-color:#f1f1f1">{{x.Name}}</td>
              <td ng-if="$even">{{ x.Name }}</td>
              <td ng-if="$odd" style="background-color:#f1f1f1">{{x.Country|uppercase}}</td>//过滤器uppercase转换成大写
              <td ng-if="$even">{{ x.Country }}</td>  //$even $odd 奇数偶数判断
          </tr>
      </table>
  </div>

</body>
</html>

转载于:https://www.cnblogs.com/yk123/p/5912459.html

weixin_33716557

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS(7)-表格

ng-repeat 指令可以完美的显示表格。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择框Select</title> <script src="angular-1.4.1/ang...
复制链接

扫一扫