angular+jquery综合练习

来源：互联网发布：华为mate8手机壳淘宝编辑：程序博客网时间：2024/06/06 01:07
<!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>
阅读全文
0 0