AngularJS 用户名查询、年龄查询、性别查询、全部删除、批量删除、添加用户、修改密码

来源：互联网发布：mac修改mysql登录密码编辑：程序博客网时间：2024/04/29 10:27
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        * {            text-align: center;        }        table{            margin: 20px auto;            border-collapse: collapse;        }        th,td{            padding: 20px;            border: 1px solid #000000;        }        .add{            width: 150px;            height: 50px;            background: deepskyblue;            font-size: 20px;        }    </style>    <script src="../../angular-1.5.5/angular.min.js"></script>    <script>        var myapp = angular.module("myapp", []);        myapp.controller("myCtrl", function ($scope) {            //模拟数据            $scope.data=[{                "name":"张三",                "pass":123,                "age":22,                "sex":"男",                "check":false            },{                "name":"李四",                "pass":456,                "age":33,                "sex":"女",                "check":false            },{                "name":"王五",                "pass":789,                "age":44,                "sex":"男",                "check":false            },{                "name":"赵六",                "pass":741,                "age":35,                "sex":"女",                "check":false            },{                "name":"周七",                "pass":852,                "age":23,                "sex":"男",                "check":false            }];            //按照年龄查询            $scope.ageSize="--请选择--";            $scope.ageFun=function (item) {                if ($scope.ageSize!="--请选择--"){                    var arr=$scope.ageSize.split("-");                    var min=arr[0];                    var max=arr[1];                    if (item.age>max||item.age<min){                        return false;                    }else {                        return true;                    }                }else {                    return true;                }            }            //按照性别查询            $scope.sex="--请选择--";            $scope.sexFun=function (item) {                if($scope.sex!="--请选择--"){                    if(item.sex==$scope.sex){                        return true;                    }else {                        return false;                    }                }else {                    return true;                }            }            //全部删除            $scope.delAll=function () {                $scope.data.length=0;            }            //全选            $scope.checkBtn=false;            $scope.checkAll=function () {                console.log($scope.checkBtn);                if ($scope.checkBtn==true){                    for (var i=0;i<$scope.data.length;i++){                        $scope.data[i].check=true;                        n=$scope.data.length;                    }                }else {                    for (var i = 0; i < $scope.data.length; i++) {                        $scope.data[i].check=false;                    }                }            }            //反选            var n=0;            $scope.fx=function (index) {                console.log(index);                if ($scope.data[index].check==true){                    n++;                }else {                    n--;                }                if (n==$scope.data.length){                    $scope.checkBtn=true;                }else {                    $scope.checkBtn=false;                }            }            //批量删除            $scope.del=function () {                for (var i=0;i<$scope.data.length;i++){                    if ($scope.data[i].check==true){                        $scope.data.splice(i,1);                        i--;                    }                }            }            //添加用户            $scope.show=false;            $scope.addUser=function () {                $scope.show=true;            }            $scope.tj=function () {                if ($scope.nameNext==""||$scope.nameNext==null){                    alert("不能为空");                }else{                    $scope.data.push({"name":$scope.nameNext,"pass":$scope.passNext,"age":$scope.ageNext,"sex":$scope.sexNext,"check":false});                    //清空输入框                    $scope.nameNext="";                    $scope.passNext="";                    $scope.ageNext="";                    $scope.sexNext="";                    $scope.show=false;                }            }            //修改密码            $scope.shows=false;            $scope.correct=function (index) {                $scope.shows=true;                $scope.xgname=$scope.data[index].name;                $scope.xgpass=$scope.data[index].pass;                $scope.index=index;            }            $scope.tjpass=function () {                if ($scope.xpass!=$scope.axpass){                    alert("两次输入的密码不一致");                    return;                }                $scope.data[$scope.index].pass = $scope.xpass;                $scope.xgname="";                $scope.xgpass="";                $scope.xpass="";                $scope.axpass="";                $scope.shows=false;            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><h2>用户信息表</h2>用户名：<input type="text" placeholder="用户名查询" ng-model="search">年龄：<select ng-model="ageSize">    <option>--请选择--</option>    <option>10-20</option>    <option>21-30</option>    <option>31-40</option>    <option>41-50</option></select>性别：<select ng-model="sex">    <option>--请选择--</option>    <option>男</option>    <option>女</option></select><button ng-click="delAll()">全部删除</button><button ng-click="del()">批量删除</button><table>    <thead>        <tr>            <th><input type="checkbox" ng-click="checkAll()" ng-model="checkBtn"></th>            <th>id</th>            <th>用户名</th>            <th>密码</th>            <th>年龄</th>            <th>性别</th>            <th>操作</th>        </tr>    </thead>    <tbody>        <tr ng-repeat="item in data|filter:{name:search}|filter:ageFun|filter:sexFun">            <td><input type="checkbox" ng-model="item.check" ng-click="fx($index)"></td>            <td>{{$index+1}}</td>            <td>{{item.name}}</td>            <td>{{item.pass}}</td>            <td>{{item.age}}</td>            <td>{{item.sex}}</td>            <td><button ng-click="correct($index)">修改密码</button></td>        </tr>    </tbody></table><button class="add" ng-click="addUser()">添加用户</button><table ng-show="show">    <tbody>        <tr>            <td>姓名</td>            <td><input type="text" placeholder="请输入姓名" ng-model="nameNext"></td>        </tr>        <tr>            <td>密码</td>            <td><input type="text" placeholder="请输入密码" ng-model="passNext"></td>        </tr>        <tr>            <td>年龄</td>            <td><input type="text" placeholder="请输入年龄" ng-model="ageNext"></td>        </tr>        <tr>            <td>性别</td>            <td><input type="text" placeholder="请输入性别" ng-model="sexNext"></td>        </tr>        <tr>            <td colspan="2"><button ng-click="tj()">提交</button></td>        </tr>    </tbody></table><table ng-show="shows">    <tbody>    <tr>        <td>姓名</td>        <td><input type="text" placeholder="请输入姓名" ng-model="xgname"></td>    </tr>    <tr>        <td>旧密码</td>        <td><input type="text" placeholder="请输入密码" ng-model="xgpass"></td>    </tr>    <tr>        <td>新密码</td>        <td><input type="text" placeholder="请输入新密码" ng-model="xpass"></td>    </tr>    <tr>        <td>确认新密码</td>        <td><input type="text" placeholder="请再次输入新密码" ng-model="axpass"></td>    </tr>    <tr>        <td colspan="2"><button ng-click="tjpass()">提交</button></td>    </tr>    </tbody></table></body></html>
阅读全文
0 0