angular+jquery综合练习

最新推荐文章于 2019-07-15 00:13:57 发布
PatrickYs
最新推荐文章于 2019-07-15 00:13:57 发布
阅读量162
点赞数
本文链接：https://blog.csdn.net/qq_39801871/article/details/78315019
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <title>第三周测试</title>
    <script>
        var app = angular.module("myApp",[]);

        var data=[
            {
                done:false,
                id:1,
                name:"张三",
                password:123,
                age:22,
                sex:"男"
            },

            {
                done:false,
                id:2,
                name:"李四",
                password:456,
                age:33,
                sex:"女"
            },

            {
                done:false,
                id:3,
                name:"王五",
                password:789,
                age:44,
                sex:"男"
            }
        ];

        app.controller("myCtrl",function($scope){
            $scope.data=[];
            $scope.data=data;
            $scope.showaddperson=false;
            $scope.showupdatanamepassword=false;

            $scope.addperson=function(){

                if($scope.showaddperson == false){
                    $scope.showaddperson=true;
                }else{
                    $scope.showaddperson=false;
                    $scope.showupdatanamepassword=false;
                }

            }

            $scope.updata=function(index){

                if($scope.showupdatanamepassword == false){

                    var a= $scope.data[index];

                    $scope.update_name= a.name;

                    $scope.showupdatanamepassword=true;
                }else{
                    $scope.showupdatanamepassword=false;
                }
            }

            var ids=4;

            $scope.addnew=function(){

                var a=$scope.add_age;

                if ($scope.add_name == undefined){
                    alert("请输入用户名");
                }
                else if(a<10 || a>60){
                    alert("年龄请在10-60之间");
                }
                else{
                    $scope.data.push({
                        done:false,
                        id:ids++,
                        name:$scope.add_name,
                        password:$scope.add_psd,
                        age:$scope.add_age,
                        sex:$scope.add_sex
                    })

                    $scope.add_name="";
                    $scope.add_psd="";
                    $scope.add_age="";
                    $scope.add_sex="";
                    $scope.showupdatanamepassword=false;
                }

            }

            $scope.updatedata=function(index){

                    for(var i in $scope.data){

                        if($scope.data[i].name == $scope.update_name){

                            if($scope.update_oldpsd == $scope.data[i].password){

                                if($scope.update_newpsd == $scope.update_newpsd2){
                                    $scope.data[i].password=$scope.update_newpsd;
                                }else{
                                    confirm("两次密码不一致");
                                }
                            }else{
                                confirm("旧密码不对！");
                            }

                        }
                    }
            }

            $scope.deletedata=function(){

                var con = confirm("你确认要删除么？");

                if(con == true){
                    for(var i=0;i<$scope.data.length;i++){
                        if($scope.data[i].done==true){
                            $scope.data.splice(i,1);
                            i--;
                        }else if($scope.data.length-1){
                            alert("请选择删除项目");
                        }
                    }
                }

            }

            $scope.checkall=function(){

                for(var i=0;i<$scope.data.length;i++){
                    if($scope.quan == true){
                        $scope.data[i].done=true;
                    }else{
                        $scope.data[i].done=false;
                    }
                }
            }

//            判断切割
            $scope.uage="-请选择-"
            $scope.aa=function(item)
            {
                if($scope.uage!="-请选择-")
                {
                    var arr=$scope.uage.split("-");
                    var min=arr[0];
                    var mac=arr[1];
                    if(min<=item.age && item.age<=mac)
                    {
                        return true;
                    }
                }else
                {
                    return true;
                }
            }

            $scope.deleteall=function(){

                for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].done=true;
                }

                var con = confirm("你确认要删除么？");

                if(con == true){
                    for(var i=0;i<$scope.data.length;i++){
                        if($scope.data[i].done==true){
                            $scope.data.splice(i,1);
                            i--;
                        }
                    }
                }
            }

            //即时过滤器
            $scope.sousuo="";
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

    <div>
        <input type="text" placeholder="用户名查询" ng-model="sousuo">

        年龄:
        <select  ng-model="uage">
            <option >-请选择-</option>
            <option >10-20</option>
            <option >20-40</option>
            <option >40-60</option>
        </select>

        性别:
        <select ng-model="sexs">
            <option >男</option>
            <option >女</option>
        </select>

        <button ng-click="deleteall()">全部删除</button>
        <button ng-click="deletedata()">批量删除</button>

    </div>

    <div>
        <table style="border: 1px solid #000000; text-align: center" border="1">
            <tr>
                <td><input type="checkbox" ng-click="checkall()" ng-model="quan" ></td>
                <td >id</td>
                <td >用户名</td>
                <td>密码</td>
                <td>年龄</td>
                <td>性别</td>
                <td>操作</td>
            </tr>

            <tr ng-repeat="x in data |filter:{'name':sousuo} |filter:{'sex':sexs}|filter:aa">
                <td><input type="checkbox" ng-model="x.done" ></td>
                <td >{{x.id}}</td>
                <td >{{x.name}}</td>
                <td >{{x.password}}</td>
                <td >{{x.age}}</td>
                <td >{{x.sex}}</td>
                <td><button ng-click="updata($index)">修改密码</button></td>
            </tr>
        </table>
    </div>

    <div>
        <button style="color: #007aff" ng-click="addperson()">添加用户</button>
    </div>

     <div ng-show="showaddperson">
         <table style="border: 1px solid #000000; text-align: center" border="1">

             <tr>
                 <td>用户名:</td>
                 <td><input type="text" ng-model="add_name"></td>
             </tr>
             <tr>
                 <td>密码:</td>
                 <td><input type="text" ng-model="add_psd"></td>
             </tr>
             <tr>
                 <td>年龄:</td>
                 <td><input type="text" ng-model="add_age"></td>
             </tr>
             <tr>
                 <td>性别:</td>
                 <td><input type="text" ng-model="add_sex"></td>
             </tr>
             <tr>
                 <td>
                     <button ng-click="addnew()">添加</button>
                 </td>
             </tr>
         </table>
     </div>

    <div ng-show="showupdatanamepassword" >
        <table style="border: 1px solid #000000; text-align: center" border="1">

            <tr>
                <td>请输入用户名:</td>
                <td><input type="text" ng-model="update_name"></td>
            </tr>
            <tr>
                <td>请输入旧密码:</td>
                <td><input type="text" ng-model="update_oldpsd"></td>
            </tr>
            <tr>
                <td>请输入新密码:</td>
                <td><input type="text" ng-model="update_newpsd"></td>
            </tr>

            <tr>
                <td>请输入新密码:</td>
                <td><input type="text" ng-model="update_newpsd2"></td>
            </tr>
            <tr>
                <td>
                    <button ng-click="updatedata()">修改</button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>