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

最新推荐文章于 2020-09-08 23:14:03 发布

xy8199

最新推荐文章于 2020-09-08 23:14:03 发布

阅读量3.7k

点赞数

分类专栏： JavaScript 文章标签： angular javascript html angularjs

本文链接：https://blog.csdn.net/xy8199/article/details/78301546

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

实现效果：

实现要求：

1. 搭建页面

2. 显示所有用户信息

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

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

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

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

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

a) 用户名非空

b) 两次密码一致

c) 年龄在10到60之间

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

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

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

源码：

<!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 />
    <!-- 1.添加用户页面 -->
    <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>
    <!-- 2.修改用户信息页面 -->
    <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>


    <!-- 6.指定相应内容 -->
    <div ng-view>

    </div>
</center>
</body>
</html>

xy8199

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AngularJS实现对用户信息的增删改查

本篇是对表单进行增删改查的操作，用到的是AngularJS实现的，有需要的可以看一下。实现效果：实现要求：1. 搭建页面2. 显示所有用户信息3. 根据用户名实现用户查询显示4. 根据年龄范围下拉菜单实现用户显示5. 根据用户年龄实现用户显示6. 实现批量删除功能：选中左侧多选框，点击批量删除，删除选中项，没选中提示用户，点击最上方的多选框，实现全选。
复制链接

扫一扫