angularjs的自动查询和排序加小三角

  style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            border-collapse: collapse;
        }
        td{
            padding: 10px;
            border: 1px solid #000;

        }
        .top{
            display: inline-block;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top:10px solid red;
        }
        .bot{
            display: inline-block;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom:10px solid red;
        }
    style>
script src="angular/angular.js"script>
    script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            var userInfo=[
                {name:"marry",salary:12345,sex:"girl",birthday:1505111954735},
                {name:"Lily",salary:12425,sex:"girl",birthday:1505711954735},
                {name:"Jeny",salary:87145,sex:"girl",birthday:1505811954735},
                {name:"Rose",salary:23845,sex:"girl",birthday:1905111954735},
                {name:"Tom",salary:86565,sex:"boy",birthday:1575111994735}
            ];
            $scope.arr=userInfo;
            /*自定义的模糊查询*/
            $scope.search="";
            $scope.searchFun=function(obj){
                if($scope.search!=""){
                    if(obj.name.toLowerCase().indexOf($scope.search.toLowerCase())!=-1){
                        return true;
                    }else{
                        return false;
                    }
                }else{
                    return true;
                }
            };
            /* 排序*/
            $scope.sort="name";
            $scope.revers=false;
            $scope.sortFun=function (column) {
                if($scope.sort==column){
                    $scope.revers=!$scope.revers;
                }else{
                    $scope.revers=false;
                }
                $scope.sort=column;
            };
            $scope.getClass=function(column){
                if($scope.sort==column){
                    if($scope.revers==false){
                        return "top"
                    }else{
                        return "bot"
                    }
                }
            }
        })
    script>
input type="text"ng-model="search">
table>
    thead>
    th</th>
    th ng-click="sortFun('name')"<span ng-class="getClass('name')"spanth>
    th ng-click="sortFun('salary')"<span ng-class="getClass('salary')"spanth>
    th ng-click="sortFun('sex')"<span ng-class="getClass('sex')"spanth>
    th ng-click="sortFun('birthday')"<span ng-class="getClass('birthday')"spanth>
    thead>
    tbody>
    tr ng-repeat="item in arr|filter:searchFun:value|orderBy:sort">
        td$index}}td>
        tditem.name|uppercase}}td>
        tditem.salary|currency:'$'}}td>
        tditem.sex}}td>
        tditem.birthday|date:'yyyy-MM-dd'}}td>
    tr>
    tbody>
table>
 

posted on 2017-09-21 09:16  &&gy  阅读(275)  评论(0编辑  收藏  举报