angular.js 表单验证

最新推荐文章于 2022-12-24 18:48:04 发布

一别两宽

最新推荐文章于 2022-12-24 18:48:04 发布

阅读量318

点赞数

本文链接：https://blog.csdn.net/qq_40332973/article/details/78051197

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            border-collapse: collapse;
            margin-top: 30px;
        }
        td,th{
            border: 1px solid #000000;
            padding: 10px;
        }
        .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="../angulatjs/angular-1.5.5/angular.min.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.seachFun=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";
// false  升序默认
            $scope.reverse=false;
            $scope.sortFun=function (colum) {
                if( $scope.sort==colum){
                    $scope.reverse=!$scope.reverse;
                }else{
                    $scope.reverse=false;
                }
                $scope.sort=colum;
            };
//            小图标
            $scope.getClass=function (colum) {
                if($scope.sort==colum){
                    if($scope.reverse==false){
                        return 'top'
                    }else{
                        return 'bot'
                    }
                }

            }
        });

    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
    <input type="text" ng-model="search">
    <table>
        <thead>
            <th ng-click="sortFun('id')">id<span ng-class="getClass('id')"></span></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:seachFun:value | orderBy:sort:reverse">
                <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>

一别两宽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular.js 表单验证

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; } table{ border-collapse: c
复制链接

扫一扫