• 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>
    
     
  • 相关阅读:
    C#线程同步(1)- 临界区&Lock
    详细解析Java中抽象类和接口的区别
    防止重复提交的几种办法
    网页中实现JSON的编辑与显示
    xcode5 ios7升级后的一系列问题解决
    hadoop-2.0.0-mr1-cdh4.2.0源码编译总结
    hadoop-2.0.0-cdh4.2.1源码编译总结
    cocos2d-iphone加入芒果广告
    hadoop2.0 eclipse 源码编译
    HBase学习笔记
  • 原文地址:https://www.cnblogs.com/zzwerzi/p/7566789.html
Copyright © 2020-2023  润新知