angular js 修改密码

来源：互联网发布：淘宝收到货后申请退款编辑：程序博客网时间：2024/06/06 01:39
<!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;            //用来记录要删除的信息            var index = 0;            //修改密码的方法            $scope.updata = function (index) {                $scope.show = true;                index = index;            }            //提交修改的方法            $scope.submitUpdate = function () {                if ($scope.usedPass != null && $scope.newPass != null && $scope.renewPass != null) {                    if ($scope.data[index].pass == $scope.usedPass && $scope.newPass == $scope.renewPass) {                        alert("提交成功");                        $scope.data[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:search">        <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-if="show">    <!--<span>用户名：</span><input type="text"> <br>-->    <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