AngularJS实现对用户信息的增删改查

电玩女神 2022-06-07 12:22 176阅读 0赞

本篇是对表单进行增删改查的操作，用到的是AngularJS实现的，有需要的可以看一下。

**实现效果：**

**![Center][]**

实现要求：

1. 搭建页面

2. 显示所有用户信息

3. 根据用户名实现用户查询显示

4. 根据年龄范围下拉菜单实现用户显示

5. 根据用户年龄实现用户显示

6. 实现批量删除功能：选中左侧多选框，点击批量删除，删除选中项，没选中提示用户，点击最上方的多选框，实现全选。

7. 点击添加用户，下方页面显示添加用户界面，填写用户信息，满足条件如下进行添加

a) 用户名非空

b) 两次密码一致

c) 年龄在10到60之间

8. 点击修改密码按钮，下方页面显示修改密码页面（如下），默认把要修改的用户名显示在用户名输入框，并且不能更改用户名，实现密码修改，要求如下

a) 旧密码要跟之前的密码一致

b) 两次输入的密码一致。

![Center 1][]

**源码：**

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>综合练习</title>
        <style>
            .addUser{
                width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;
            }
        </style>
        <script type="text/javascript" src="angular-1.3.0.js" ></script>
        <script type="text/javascript" src="angular-route.js" ></script>
        <script type="text/javascript">
            var app = angular.module("myApp",["ngRoute"]);
            //使用config配置路由规则 app.config(["$routeProvider",function($routeProvider){
                $routeProvider
                        .when("/addUser",{
                            controller:"addUserCtrl",
                            templateUrl:"addUser.html" })
                        .when("/updatePwd/:name",{
                            controller:"updatePwdCtrl",
                            templateUrl:"updatePwd.html" })
                        .otherwise({
      redirectTo:"/addUser"});
            }]);
            app.controller("myCtrl",function($scope,$location){
                $scope.users = [
                    {
      "id":1,"name":"张三","pwd":"123","age":20,"sex":"男"},
                    {
      "id":2,"name":"李四","pwd":"456","age":33,"sex":"女"},
                    {
      "id":3,"name":"王五","pwd":"789","age":42,"sex":"男"}
                ];
                //定义页面跳转方法 $scope.goToUrl = function(path){
                    alert(path);
                    $location.path(path);
                }
                //全部删除 $scope.del=function(){
                    if(confirm("确实删除吗？")){
                        $scope.users=[];
                    }
                };
                $scope.ageTest=function(age,agesize){
    
                    if(agesize !="--请选择--"){
                        var ages=agesize.split("-");
                        var ageMin=ages[0];
                        var ageMax=ages[1];
    
                        if(age<ageMin || age>ageMax){
    
                            return false;
                        }else{
                            return true;
                        }
                    }else{
                        return true;
                    }
                }
                //批量删除 $scope.deleteSel=function(){
                    var userNames=[];
                    for(index in $scope.users){
                        if($scope.users[index].state == true){
                            userNames.push($scope.users[index].name);
                        }
                    }
    
                    if(userNames.length>0){
                        if(confirm("是否删除选中项？")){
                            for(i in userNames){
                                var name=userNames[i];
                                for(i2 in $scope.users){
                                    if($scope.users[i2].name==name){
                                        $scope.users.splice(i2,1);
                                    }
                                }
                            }
                        }
                    }else{
                        alert("请选择删除的项")
                    }
                }
                //全选按钮 $scope.gou=function () {
                    for(var i=0;i<$scope.users.length;i++) {
                        if($scope.checkAll==true) {
                            $scope.users[i].state=true;
                        } else {
                            $scope.users[i].state=false;
                        }
                    }
                }
            });
            //定义添加用户控制器 app.controller("addUserCtrl",function($scope){
    
                $scope.name = "";
                $scope.pwd = "";
                $scope.pwd2 = "";
                $scope.age = "";
                $scope.sex = "";
    
                $scope.sub = function(){
                    if($scope.name==""){
                        alert("用户名不能为空");
                    }else {
                        if($scope.age>=10&&$scope.age<=60){
                            var newUser = {
                                id:$scope.users.length + 1,
                                name:$scope.name,
                                pwd:$scope.pwd,
                                age:$scope.age,
                                sex:$scope.sex }
                            //添加新用户. $scope.users.push(newUser);
                        }else{
                            alert("年龄在10到60之间");
                        }
    
                    }
    
    
                }
            });
            //定义修改用户控制器 app.controller("updatePwdCtrl",function($scope,$routeParams){
                $scope.name = $routeParams.name;
                $scope.oldPwd = "";
                $scope.pwd1 = "";
                $scope.pwd2 = "";
                $scope.updatePwd = function(){
                    for(index in $scope.users){
                        if($scope.users[index].name==$scope.name){
                            if($scope.users[index].pwd==$scope.oldPwd){
                                if($scope.pwd1==$scope.pwd2){
                                    $scope.users[index].pwd=$scope.pwd1;
                                }else{
                                    alert("两次密码不一致");
                                }
                            }else{
                                alert("旧密码错误");
                            }
                        }
                    }
                }
    
            });
    
    
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
    <center>
        <h3>用户信息表</h3>
        <div>
            <input ng-model="search" placeholder="用户名查询" size="10" />
            年龄：<select id="age" ng-model="agesize" ng-init="agesize='--请选择--'">
            <option>--请选择--</option>
            <option>19-30</option>
            <option>31-40</option>
            <option>41-50</option>
        </select>
            性别：<select>
            <option>男</option>
            <option>女</option>
        </select>
            <input type="button" value="全部删除" ng-click="del()"/>
            <input ng-click="deleteSel()" type="button" value="批量删除"/>
        </div><br />
        <div>
            <table border="1" cellspacing="1" cellpadding="10">
                <thead>
                <tr>
                    <th><input type="checkbox" ng-click="gou()" ng-model="checkAll"></th>
                    <th>id</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="user in users | filter:{ 'name':search}" ng-if="ageTest(user.age,agesize)">
                    <th><input ng-model="user.state" type="checkbox"></th>
                    <td>{
      {
      user.id}}</td>
                    <td>{
      {
      user.name}}</td>
                    <td>{
      {
      user.pwd}}</td>
                    <td>{
      {
      user.age}}</td>
                    <td>{
      {
      user.sex}}</td>
                    <td><button ng-click="goToUrl('/updatePwd/'+user.name)">修改密码</button> </td>
                </tr>
                </tbody>
            </table>
        </div><br />
        <button class="addUser" ng-click="goToUrl('/addUser')">添加用户</button><br /><br />
         <script type="text/ng-template" id="addUser.html">
            <form action="">
                <table border="1" cellspacing="1" cellpadding="10">
                    <tr>
                        <th>用户名：</th>
                        <td><input ng-model="name" type="text" required placeholder="请输入用户名"/></td>
                    </tr>
                    <tr>
                        <th>密　码：</th>
                        <td><input ng-model="pwd" placeholder="请输入密码" /></td>
                    </tr><tr>
                    <th>年　龄：</th>
                    <td><input ng-model="age" placeholder="请输入年龄" /></td>
                </tr><tr>
                    <th>性　别：</th>
                    <td><input ng-model="sex" placeholder="请输入性别" /></td>
                </tr>
                    <tr align="center">
                        <td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
                    </tr>
                </table>
            </form>
        </script>
         <script type="text/ng-template" id="updatePwd.html">
            <form>
                <table border="1" cellspacing="1" cellpadding="10">
                    <tr>
                        <th>用户名：</th>
                        <td><input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td>
                    </tr>
                    <tr>
                        <th>旧密码：</th>
                        <td><input ng-model="oldPwd" placeholder="请输入密码" /></td>
                    </tr><tr>
                    <th>新密码：</th>
                    <td><input ng-model="pwd1" placeholder="请输入密码" /></td>
                </tr><tr>
                    <th>确认：</th>
                    <td><input ng-model="pwd2" placeholder="请输入密码" /></td>
                </tr>
                    <tr align="center">
                        <td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td>
                    </tr>
                </table>
            </form>
        </script>
    
    
         <div ng-view>
    
        </div>
    </center>
    </body>
    </html>

[Center]: /images/20220607/517e251a0cb84b2e9feec5a8d346b99f.png
[Center 1]: /images/20220607/01a4094ec9de436f8bf855252819088c.png