zoukankan      html  css  js  c++  java
  • angularjs的自动查询和排序加小三角

      style>
            *{
                margin: 0;
                padding: 0;
            }
            table{
                border-collapse: collapse;
            }
            td{
                padding: 10px;
                border: 1px solid #000;
    
            }
            .top{
                display: inline-block;
                 0;
                height: 0;
                border: 10px solid transparent;
                border-top:10px solid red;
            }
            .bot{
                display: inline-block;
                 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>
    
     
  • 相关阅读:
    linux初学者-普通磁盘分区篇
    linux初学者-延迟及定时任务篇
    linux初学者-网络管理篇
    linux初学者-虚拟机联网篇
    贪吃蛇Ground Java实现(二)
    贪吃蛇 Java实现(一)
    创建异常
    IO流
    实训第一天
    Array 遍历数组
  • 原文地址:https://www.cnblogs.com/zzwerzi/p/7566789.html
Copyright © 2011-2022 走看看