zoukankan      html  css  js  c++  java
  • AngularJS 学习之表格

    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>

  • 相关阅读:
    洛谷 P1325 雷达安装 解题报告
    洛谷 P2184 贪婪大陆 解题报告
    洛谷 P3942 将军令 解题报告
    洛谷 P3698 [CQOI2017]小Q的棋盘 解题报告
    洛谷 P1436 棋盘分割 解题报告
    C++生成dump文件,调试dump文件
    判断机器大小端的两种实现方法
    判断机器大小端的两种实现方法
    Visual Studio 代码生成 运行时库的选择
    Visual Studio 代码生成 运行时库的选择
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6082787.html
Copyright © 2011-2022 走看看