angularjs 单列排序+模糊查询

最新推荐文章于 2022-03-19 19:05:32 发布

置顶赛文

最新推荐文章于 2022-03-19 19:05:32 发布

阅读量277

点赞数

分类专栏： angular js

本文链接：https://blog.csdn.net/qq_39493777/article/details/78048544

版权

angular js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            border-collapse: collapse;
            margin-top: 10px;
        }
        table td,th{
            border: 1px solid #000000;
        }
        .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>
        var app=angular.module("myapp",[]);
        app.controller("mycontroller",function ($scope) {
            $scope.arr=[
                {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.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 (colnum) {
                if($scope.sort==colnum){
                    $scope.revers=!$scope.revers;
                }else {
                    $scope.revers=false;
                }
                $scope.sort=colnum;
            };
            /*获取类的方法*/
            $scope.getClass=function (colnum) {
                if ($scope.sort==colnum){
                    if($scope.revers==false){
                        return "top";
                    }else {
                        return "bot";
                    }
                }
            }

        })
    </script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<input type="text" ng-model="search">
<table>
    <thead>
    <th>编号</th>
    <th ng-click="sortfun('name')">姓名<span ng-class="getClass('name')"></span></th>
    <th ng-click="sortfun('salary')">薪资<span ng-class="getClass('salary')"></span></th>
    <th ng-click="sortfun('sex')">性别<span ng-class="getClass('sex')"></span></th>
    <th ng-click="sortfun('birthday')">生日<span ng-class="getClass('birthday')"></span></th>
    </thead>
    <tr ng-repeat="item in arr|filter:searchFun:search|orderBy:sort:revers">
        <td>{{$index}}</td>
        <td>{{item.name|uppercase}}</td>
        <td>{{item.salary|currency:'$'}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.birthday|date:'yyyy-mm-dd'}}</td>
    </tr>
</table>
</body>
</html>

赛文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs 单列排序+模糊查询

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="../angular-1.5.5/angular.js">script> style> *{ margin: 0; padding: 0;
复制链接

扫一扫