angular+自定义模糊查询+排序+三角

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>
head>
<body ng-app="myapp" ng-controller="myCtrl">
<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>
    <tbody>
    <tr ng-repeat="item in arr|filter:searchFun:value|orderBy:sort">
        <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>
    tbody>
table>

body>
html>

你可能感兴趣的:(html5)