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>
  • 相关阅读:
    完美解决微信端设置title失败问题
    linux下的find&&grep查找命令
    微信开发二三事
    干掉chrome下input恶心的黄色背景
    关于.gitignore文件使用说明
    HTTPie:一个不错的 HTTP 命令行客户端
    退出登录功能改变window的rootviewcontroller输入框键盘不会收起
    coredata操作工具
    并发编程gcd粗暴记忆法
    网友的百度移动云可穿戴部门的面试经历
  • 原文地址:https://www.cnblogs.com/dehuachenyunfei/p/6725217.html
Copyright © 2011-2022 走看看