zoukankan      html  css  js  c++  java
  • AngularJS(7)-表格

    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>
    

      

  • 相关阅读:
    epoll oneshot
    回望五月
    都知道的copy_from_user
    ixgbe 驱动 为xxx驱动做准备1
    面试问题集锦
    数据治理
    阅读
    hive 数据仓库面试题目集锦
    面试小问题集锦
    Scala学习笔记~尚硅谷学习视频
  • 原文地址:https://www.cnblogs.com/yk123/p/5912459.html
Copyright © 2011-2022 走看看