service sort 添加日程验证

最新推荐文章于 2021-01-27 21:22:55 发布

颓默

最新推荐文章于 2021-01-27 21:22:55 发布

阅读量223

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.service("User",function(){
            var user={
                id:"01",
                name:"Mary",
                Email:"Mary@126.com"
            };
            this.getUser=function(){
                return user;
            };
            this.setUser=function(id,name,Email){
                user.id=id;
                user.name=name;
                user.Email=Email;
            }
        });
        myapp.controller("myctrl",function ($scope,User) {
            $scope.user=User.getUser();
            $scope.setUser=function(){
                User.setUser($scope.id,$scope.name,$scope.Email);
            }
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<ul>
    <li>{{user.id}}</li>
    <li>{{user.name}}</li>
    <li>{{user.Email}}</li>
</ul>
<div>
    id<input type="text" ng-model="id"><br/>
    name<input type="text" ng-model="name"><br/>
    Email<input type="text" ng-model="Email"><br/>
    <button ng-click="setUser()"></button>

</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .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.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function($scope){
            $scope.arr=[{name:"marry",salary:12345,sex:"girl",birthday:new Date(2016-10-05)},
                {name:"Lily",salary:12425,sex:"girl",birthday:new Date(2016-04-05)},
                {name:"Jeny",salary:87145,sex:"girl",birthday:new Date(1996-10-05)},
                {name:"Rose",salary:23845,sex:"girl",birthday:new Date(1995-10-05)},
                {name:"Tom",salary:86565,sex:"boy",birthday:new Date(1994-10-05)}];
            $scope.search="";
            $scope.searchFun=function(obj){
                //console.log(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){
                //console.log(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>
    <tr>
        <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>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in arr|filter:searchFun:value|orderBy:sort:revers">
        <td>{{$index}}</td>
        <td>{{item.name}}</td>
        <td>{{item.salary}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.birthday}}</td>
    </tr>
    </tbody>
</table>

</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        td{
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
<script src="jquery-3.2.1.min.js"></script>
    <script src="angular.min.js="></script>
    <script>
        /*
         1、基本布局
         2、准备模拟数据
         */
        // 模拟数据
        var data = {
            user:"吴四",
            items:[
                {action:"约刘诗诗吃饭",done:false},
                {action:"约刘诗诗跳舞",done:false},
                {action:"约刘诗诗敲代码",done:true},
                {action:"约刘诗诗爬长城",done:false},
                {action:"约刘诗诗逛天坛",done:false},
                {action:"约刘诗诗看电影",done:false}
            ]
        };
        var myapp=angular.module("myapp",[]);
        /*这里的是自定义过滤器，将数组items 过滤之后返回arr*/
        myapp.filter("doFilter",function(){
            /*传入两个参数，一个数组items，另一个是complate*/
            return function(items,flag){
                var arr=[];
                /*遍历items,如果dones是false或者下边的按钮在选中状态，就将这一条item push到arr中*/
                for(var i=0;i<items.length;i++){
                    if(items[i].done==false){
                        arr.push(items[i]);
                    }else{
                        if(flag==true){
                            arr.push(items[i]);
                        }
                    }
                }
                return arr;
            }
        });
        myapp.controller("myCtrl",function($scope){
            $scope.data=data;
            $scope.complate=false;
            /*判断还有几件事儿没有完成*/
            $scope.count=function(){
                var n=0;
                /*判断还有几件事儿没有完成*/
                for(var i=0;i<$scope.data.items.length;i++){
                    if($scope.data.items[i].done==false){
                        n++;
                    }
                }
                return n;
            };
            /*添加新的日程*/
            $scope.add=function(){
                /*对$scope.action进行一下非空判断*/
                if($scope.action){
                    /*如果输入了内容之后，就在数组的最后加入一条新内容*/
                    $scope.data.items.push({"action":$scope.action,"done":false});
                    /*添加完成之后，将input置空*/
                    $scope.action="";
                }
            };
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>吴四的日程<span ng-bind="count()"></span></h2>
<div>
    <input type="text" ng-model="action"><button ng-click="add()">添加</button>
</div>
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>日程</th>
        <th>完成情况</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data.items|doFilter:complate">
        <td>{{$index}}</td>
        <td>{{item.action}}</td>
        <td><input type="checkbox" ng-model="item.done"></td>
    </tr>
    </tbody>
</table>
<div>显示全部<input type="checkbox" ng-model="complate"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
   <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#name").blur(function () {
                var le=$(this).val().length;
                console.log(le)
                if(le<3){
                    $("#sname").text("用户名格式不正确");
                }else {
                    $("#sname").text("✔");
                }
            })
            $("#emil").blur(function () {
                var le=$(this).val();

                if(le.indexOf("@")>=0){
                    $("#semil").text("✔");
                }else {

                    $("#semil").text("用户名格式不正确");
                }
            })
            $("#num").blur(function () {
                var le=$(this).val().length;

                if(le!=11){
                    $("#snum").text("用户名格式不正确");
                }else {
                    $("#snum").text("✔");
                }
            })
            $("#card").blur(function () {
                var le=$(this).val().length;

                if(le!=18){
                    $("#scard").text("用户名格式不正确");
                }else {
                    $("#scard").text("✔");
                }
            })
        })
    </script>
</head>
<body>
姓名:<input type="text" id="name"><span id="sname"></span><br>
Email地址:<input type="text" id="emil"><span id="semil"></span><br>
手机号:<input type="text" id="num"><span id="snum"></span><br>
身份证号码:<input type="text" id="card"><span id="scard"></span><br>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
<script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#name").blur(function () {
                var le=$(this).val().length;
                console.log(le)
                if(le<3){
                    $("#sname").text("用户名格式不正确");
                }else {
                    $("#sname").text("✔");
                }
            })
            $("#emil").blur(function () {
                var le=$(this).val();

                if(le.indexOf("@")>=0){
                    $("#semil").text("✔");
                }else {

                    $("#semil").text("用户名格式不正确");
                }
            })
            $("#num").blur(function () {
                var le=$(this).val().length;

                if(le!=11){
                    $("#snum").text("用户名格式不正确");
                }else {
                    $("#snum").text("✔");
                }
            })
            $("#card").blur(function () {
                var le=$(this).val().length;

                if(le!=18){
                    $("#scard").text("用户名格式不正确");
                }else {
                    $("#scard").text("✔");
                }
            })
        })
    </script>
</head>
<body>
姓名:<input type="text" id="name"><span id="sname"></span><br>
Email地址:<input type="text" id="emil"><span id="semil"></span><br>
手机号:<input type="text" id="num"><span id="snum"></span><br>
身份证号码:<input type="text" id="card"><span id="scard"></span><br>
</body>
</html>>

颓默

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
service sort 添加日程验证

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="angular.min.js">script> script> var myapp=angular.module("myapp",[]); myapp.service("User
复制链接

扫一扫