Angularjs Table

1.通常使用ng-repeat来循环tr形成的表格

2.可以给表格加css样式

 <style>
        table, tr, th, td {
            border: 1px solid red;
            border-collapse: collapse;
            padding: 5px;
        }

            table tr:nth-child(odd) {
                background-color: aquamarine;
            }

            table tr:nth-child(even) {
                background-color: antiquewhite;
            }
    </style>

<div ng-app="MyApp" ng-controller="MyControll">
        <table>
            <tr><th>姓名</th><th>年龄</th><th>工作</th></tr>
            <tr ng-repeat="x in datas">
                <td>{{x.Name}}</td>
                <td>{{x.Age}}</td>
                <td>{{x.Work}}</td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module("MyApp", []).controller("MyControll",
            function ($scope, $http) {
                $http.get("/demo/Service/TestHander.ashx").success(function (response) {
                    $scope.datas = response.Datas;
                });
            });
    </script>

 

3.Orderby过滤器在table循环时候的使用

 <tr ng-repeat="x in datas | orderBy:'Age'">//只需要在循环的时候加上过滤器条件即可

 

4.Uppercase 过滤器的使用

 <table>
            <tr><th>姓名</th><th>年龄</th><th>工作</th></tr>
            <tr ng-repeat="x in datas | orderBy:'Age'">
                <td>{{x.Name}}</td>
                <td>{{x.Age}}</td>
                <td>{{x.Work | uppercase}}</td>//在要绑定的字段上面使用此顾虑器
            </tr>
        </table>

 

5.$index的使用，在table的ng-repeat中$index是angular自带的service，表示序号的意思

 <td>{{$index+1}}</td>//新增一列表示序号

6.$even和$odd的使用

 

  <table>
            <tr><th>序号</th><th>姓名</th><th>年龄</th><th>工作</th></tr>
            <tr ng-repeat="x in datas | orderBy:'Age'">
               //下面两行必须要同时存在才有效果
                <td ng-if="$even" style="background-color:white;">{{$index+1}}</td>
                <td ng-if="$odd">{{$index+1}}</td>


                <td>{{x.Name}}</td>
                <td>{{x.Age}}</td>
                <td>{{x.Work | uppercase}}</td>
            </tr>
        </table>

table在实际工作中应用的还是比较多的，今天这一章节主要介绍了table中几个常见的小技巧，包括两个控制器（orderBy|uppercase）和3个angularjs service （$index|$odd|$even）,最重要的就是常用的css样式了,

学会使用指令ng-if来对不同的td进行判断后给出不用的样式！！！