AngularJs+用户信息表基本功能实现

最新推荐文章于 2022-09-22 16:14:22 发布
龙图图
最新推荐文章于 2022-09-22 16:14:22 发布
阅读量331
点赞数
分类专栏：网页设计文章标签： angularjs
本文链接：https://blog.csdn.net/xingyueyezi01/article/details/78309387
版权
网页设计专栏收录该内容
17 篇文章 0 订阅
订阅专栏
<!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.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.sexTest = function (sex, sexsize) {
                if (sexsize !== "--请选择--") {
                    var sexs = sexsize.split("-");
                    if (sexs == sex){
                        return true;
                    }else{
                        return false;
                    }
                }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.selectAll = false;
            $scope.selectAllFun = function(){
                if($scope.selectAll){
                    //alert("afsd");
                    for(index in $scope.users){
                        $scope.users[index].state = true;
                    }
                }else{
                    for(index in $scope.users){
                        $scope.users[index].state = false;
                    }
                }
            }

            //检测是否全选
            $scope.checkSelect = function(index){
                var temp = 0;
                if($scope.users[index].state == true){
                    temp++;
                }else{
                    temp--;
                }
                if(temp == $scope.users.length){
                    $scope.selectAll = true;
                }else{
                    $scope.selectAll = false;
                }

                var haha = false;
                for(i in $scope.users){
                    if($scope.users[i].state == true){

                    }else{
                        haha = true;
                    }
                }
                if(haha){
                    $scope.selectAll = false;
                }else{
                    $scope.selectAll = true;
                }
            }

        });
        //定义添加用户控制器
        app.controller("addUserCtrl",function($scope){

            $scope.name = "";
            $scope.pwd = "";
            $scope.pwd2 = "";
            $scope.age = "";
            $scope.sex = "";

            $scope.sub = function(){
                var newUser = {
                    id:$scope.users.length + 1,
                    name:$scope.name,
                    pwd:$scope.pwd,
                    age:$scope.age,
                    sex:$scope.sex
                }
                //添加新用户.
                $scope.users.push(newUser);
            }
        });
        //定义修改用户控制器
        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){
                        $scope.users[index].pwd=$scope.pwd1;
                    }
                }
            }



        });

    </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 id="sex" ng-model="sexsize" ng-init="sexsize='--请选择--'">
        <option>--请选择--</option>
        <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-model="selectAll" ng-click="selectAllFun()"/></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)"  ng-show="sexTest(user.sex,sexsize)">
                <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" 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>
龙图图
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs+用户信息表基本功能实现

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>综合练习</title> <style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; }
复制链接

扫一扫