zoukankan      html  css  js  c++  java
  • AngularJS学习篇(十一)

    AngularJS 表格

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

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <script src="angular-1.6.3/angular.js"></script>
        <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>
    </head>
    <body>
    <div ng-app="myApp" ng-controller="myCtrl">
       <table>
           <tr ng-repeat="x in names">
               <td>{{x.name}}</td>
               <td>{{x.age}}</td>
           </tr>
       </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl',function ($scope) {
            $scope.names= [{name : "Ford", age : 12, color : "red"},
                 {name : "Fiat", age : 50, color : "white"},
                 {name : "Volvo", age : 9, color : "black"}];
        })
    </script>
    </body>
    </html>

    使用 orderBy 过滤器

    排序显示,可以使用 orderBy 过滤器: 

    <table>
      <tr ng-repeat="x in names | orderBy : 'age'">
        <td>{{ x.name }}</td>
        <td>{{ x.age}}</td>
      </tr>
    </table>

    显示序号 ($index)

    表格显示序号可以在 <td> 中添加 $index

    <table>
      <tr ng-repeat="x in names">
        <td>{{ $index + 1 }}</td>
        <td>{{ x.name }}</td>
        <td>{{ x.age}}</td>
      </tr>
    </table>

    使用 $even 和 $odd

    odd:奇数行;even:偶数行; 从0开始

    <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.age}}</td>
    <td ng-if="$even">{{ x.age}}</td>
    </tr>
    </table>
     <table>
            <tr ng-repeat="x in names">
                <td style="{{$even?'background-color: red':''}}">{{$index + 1}}</td>
                <td style="{{$even?'background-color: red':''}}">{{ x.name }}</td>
                <td style="{{$even?'background-color: red':''}}">{{ x.age}}</td>
            </tr>
        </table>
  • 相关阅读:
    switch-case的用法
    关于string
    串的顺序存储和链式存储
    【APIO2009T1】采油区域-分类讨论+动态规划
    【APIO2009T1】采油区域-分类讨论+动态规划
    【BashuOJ2963】数字游戏-DFS+剪枝
    【BashuOJ2963】数字游戏-DFS+剪枝
    【POJ3177】Redundant Paths-边双连通分量+缩点
    【POJ3177】Redundant Paths-边双连通分量+缩点
    【POJ2942】Knights of the Round Table-点双连通分量+判断奇环
  • 原文地址:https://www.cnblogs.com/dehuachenyunfei/p/6725217.html
Copyright © 2011-2022 走看看