AngularJs用户管理

来源：互联网发布：mac os10.13 10.12 编辑：程序博客网时间：2024/06/16 05:56

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            margin-top: 20px;
            border-collapse: collapse;
        }

        td, th {
            border: 1px solid #000;
            padding: 20px;
            text-align: center;
        }

        button {
            border-radius: 5px;
            border: 1px solid gainsboro;
            background-color: orange;
            color: white;
            padding: 5px;
        }

        span {
            width: 100px;
            display: inline-block;
        }

        .age {
            width: 20px;
            height: 20px;
        }
    </style>
    <script>
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", function ($scope) {
            var data = [{"name": "a", "pass": 111, "age": 20, "sex": "男", "check": false},
                {"name": "b", "pass": 222, "age": 21, "sex": "女", "check": false},
                {"name": "c", "pass": 333, "age": 22, "sex": "男", "check": false}];
            $scope.data = data;
            //判断修改的界面是否出现
            $scope.show = false;
            //旧密码
            $scope.usedPass;
            //新密码
            $scope.newPass;
            //确认密码
            $scope.renewPass;
            //用来记录要修改的信息
            $scope.index = 0;
            //修改密码的方法
            $scope.updata = function (index) {
                $scope.index = index;
                $scope.show = true;

            }
            //提交修改的方法
            $scope.submitUpdate = function () {
                if ($scope.usedPass != null && $scope.newPass != null && $scope.renewPass != null) {
                    if ($scope.data[ $scope.index].pass == $scope.usedPass && $scope.newPass == $scope.renewPass) {
                        alert("提交成功");
                        $scope.data[$scope.index].pass = $scope.newPass;
                        //成功后让修改界面消失
                        $scope.show = false;
                        $scope.usedPass = "";
                        $scope.newPass = "";
                        $scope.renewPass = "";
                    } else if ($scope.newPass != $scope.renewPass) {
                        alert("两次密码不一致，请重新检查");
                    } else {
                        alert("旧密码有误，请您确定后再输入");
                    }
                }
            }
            //用来查询的字段
            $scope.cxSearch;
            $scope.cx = function (ziduan) {
                console.log(ziduan);
                console.log($scope.select);
                $scope.cxSearch = ziduan;
            }
//            $scope.startAge=20;
//            $scope.endAge=21;
            //查询的方法
            $scope.searchFifter = function (search) {
                if ($scope.name != null || $scope.select != null || ($scope.startAge != null || $scope.endAge != null)) {
                    if ($scope.cxSearch == "name") {
                        if (search.name.indexOf($scope.name) != -1) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if ($scope.cxSearch == "select") {
                        if (search.sex.indexOf($scope.select) != -1) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if ($scope.cxSearch == "age") {
                        if ($scope.startAge < parseInt(search.age) && parseInt(search.age) < $scope.endAge || $scope.startAge == search.age || $scope.endAge == search.age) {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
                return true;
            }
            //删除全部的方法
            $scope.delAll = function () {
                if (confirm("确认删除")) {
                    $scope.data = [];
                }
            }
            $scope.addshow = false;
            //添加用户的方法
            $scope.add = function () {
                $scope.addshow = true;
            }
            $scope.submitAdd = function () {
                if ($scope.addname == null || $scope.addpass == null || $scope.addage == null || $scope.addsex == null) {
                    alert("用户信息不可为空");
                } else {
                    $scope.data.push({
                        "name": $scope.addname,
                        "pass": $scope.addpass,
                        "age": $scope.addage,
                        "sex": $scope.addsex,
                        "check": false
                    });
                    alert("提交成功");
                    $scope.addshow = false;
                }

            }
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" placeholder="用户名查询" ng-model="name" ng-click="cx('name')">
年龄范围查询:<input type="text" class="age" ng-model="startAge" ng-click="cx('age')">-<input type="text" class="age"
                                                                                       ng-model="endAge"
                                                                                       ng-click="cx('age')">
性别选项:<select ng-model="select" ng-click="cx('select')">
    <option>男</option>
    <option>女</option>
</select>
<button ng-click="delAll()">全部删除</button>
<table>
    <thead>
    <th>id</th>
    <th>用户名</th>
    <th>密码</th>
    <th>年龄</th>
    <th>性别</th>
    <th>操作</th>
    </thead>
    <tbody>
    <tr ng-repeat="item in data | filter:searchFifter">
        <td>{{$index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.pass}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td>
            <button ng-click="updata($index)">修改密码</button>
        </td>
    </tr>
    </tbody>
</table>
<button style="margin-top: 20px" ng-click="add()">添加用户</button>
<br>
<div ng-show="show">
    
    <span>旧密码:</span><input type="password" ng-model="usedPass"> <br>
    <span>新密码:</span><input type="password" ng-model="newPass"> <br>
    <span>确认密码</span><input type="password" ng-model="renewPass"> <br>
    <button style="margin-top: 20px" ng-click="submitUpdate()">提交</button>

</div>
<div ng-show="addshow">
    <span>用户名:</span> <input type="text" ng-model="addname"><br>
    <span>密码:</span><input type="password" ng-model="addpass"><br>
    <span>年龄:</span><input type="text" ng-model="addage"><br>
    <span>性别:</span><input type="text" ng-model="addsex"><br>
    <button style="margin-top: 20px" ng-click="submitAdd()">提交</button>
</div>
</body>

</html>

阅读全文

0 0