angularjs实现的员工管理系统

最新推荐文章于 2022-12-30 17:37:05 发布
平平淡淡的痛
最新推荐文章于 2022-12-30 17:37:05 发布
阅读量1.1k
点赞数
本文链接：https://blog.csdn.net/jiagezuishuai/article/details/78053006
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        table{
            border-collapse: collapse;
            text-align: center;
        }
        td{
            padding: 15px;
            border: 1px solid black;
        }
        th{
            padding: 15px;
            border: 1px solid black;
        }
        .font{
            color: red;
        }
    </style>
    <script src="angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("mCtrl",function ($scope) {
            $scope.items=[
                {"name":"张三","pass":"123","age":30,"sex":"男" ,check:false},
                {"name":"李四","pass":"7867","age":25,"sex":"女", check:false},
                {"name":"王五","pass":"4567","age":21,"sex":"男", check:false},
                {"name":"赵六","pass":"45234","age":16,"sex":"女", check:false}];
            $scope.add_sfHide=true;
            $scope.add=function () {
                $scope.sfHide=true;
                $scope.add_sfHide=false;
            };
            //添加信息
            $scope.addNew=function (name,pass,age,sex) {
                var is=confirm("是否确认添加");
                if(is){
                    $scope.items.push({
                        name:name,pass:pass,age:age,
                        sex:sex

                    });
                    $scope.sfHide=false;
                    $scope.add_sfHide=true;
                }
            };
            //删除全部
            $scope.allRemove=function () {
                if(confirm("确认清除")){
                    $scope.items=[];
                }
            }
            //点击复选框全选
            $scope.checkAll=function () {
                if($scope.allCheck == true){
                    for(var i=0;i<$scope.items.length;i++){
                        $scope.items[i].check=true;
                    }
                }
            };
            //点击数据里的复选框 头部复选框被选中
            $scope.itemCheck=function () {
                var flag=0;
                for(var i=0;i<$scope.items.length;i++){
                    if($scope.items[i].check==true){
                        flag++;
                    }
                }
                if(flag==$scope.items.length){
                    $scope.allCheck=true;
                }else{
                    $scope.allCheck=false;
                };
                //批量删除
                $scope.PdelAll=function () {
                    var is=confirm("是否删除");
                    if(is==true){
                        var arr=[];
                        for(var i=0;i<$scope.items.length;i++){
                            if($scope.items[i].check==false){
                                arr.push($scope.items[i]);
                            }
                        }
                        $scope.items=arr;
                    }
                }
            };
            $scope.orderName="name";
            $scope.order=false;
            //安字段排序
            $scope.changeOrder=function (orderName) {
                if($scope.orderName== orderName){
                    $scope.order=!$scope.order;
                }
                $scope.orderName=orderName;
            };
            //点击变色
            $scope.addClas=function (orderName) {
                if(orderName==$scope.orderName){
                    return "font";
                }
            }
            // 用于接收修改的索引值
            $scope.newIndex = 0;

            //如果点击修改框
            $scope.updatePass=function (inde,name,pass) {
                $scope.update_hides=true;
                $scope.oldName=name;
                $scope.oldPass=pass;

            };
            //修改密码
            $scope.newUpdate=function (name,pass,againPass) {
                if(pass!=againPass){
                    alert("两次密码不相符");
                }else {
                    //修改表数据
                    $scope.items[$scope.newIndex].name=name;
                    $scope.items[$scope.newIndex].pass=againPass;
                    // 修改后隐藏修改框
                    $scope.update_hides=false;
                    // 修改后将新密码和确认密码置空
                    $scope.newPass="";
                    $scope.againPass="";
                }

            }
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="mCtrl">
<div style="float: left">
    <input type="text" style="width: 100px" placeholder="用户名查询" ng-model="keys_name">
    <input type="number" style="width: 50px" placeholder="min" ng-model="keys_min">
    <span>-</span>
    <input type="number" style="width: 50px" placeholder="max" ng-model="keys_max">
    <select style="height: 25px" ng-model="sels_sex">
        <option>男</option>
        <option>女</option>
    </select>
    <button ng-click="allRemove()">全部删除</button>
    <button style="width: 100px" ng-click="PdelAll()">批量删除</button>
    <table>
        <thead>
        <tr>
            <th><input type="checkbox" ng-model="allCheck" ng-click="checkAll()"></th>
            <th>序号</th>
            <th ng-click="changeOrder('name')" ng-class="addClas('name')">用户名</th>
            <th ng-click="changeOrder('pass')" ng-class="addClas('pass')">密码</th>
            <th ng-click="changeOrder('age')" ng-class="addClas('age')">年龄</th>
            <th ng-click="changeOrder('sex')" ng-class="addClas('sex')">性别</th>
            <th ng-click="">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in items|filter:{name:keys_name}|filter:{sex:sels_sex}|orderBy:orderName:order">
            <td><input type="checkbox" ng-model="item.check" ng-click="itemCheck()"></td>
            <td>{{$index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.pass}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td><button ng-click="updatePass($index,item.name,item.pass)">修改密码</button></td>
        </tr>
        <tr ng-if="sfHide">
            <td colspan="7">
                用户名:<input type="text" ng-model="input_name">
                密码:<input type="text" ng-model="input_pass">
                年龄:<input type="text" ng-model="input_age">
                性别:<input type="text" ng-model="input_sex">
                <button ng-click="addNew(input_name,input_pass,input_age,input_sex)">添加到列表</button>
            </td>
        </tr>

        <tr ng-if="add_sfHide">
            <td colspan="7">
                <button style="width: 100%" ng-click="add()">添加用户</button>
            </td>
        </tr>
    </table>
</div>

<div ng-if="update_hides">
    <h1>修改框</h1>
    <table>
        <tr>
            <th>用户名：<input type="text" ng-model="oldName"></th>
        </tr>
        <tr style="width: 100%">
            <th>旧密码：<input type="text" ng-model="oldPass"></th>
        </tr>
        <tr>
            <th>新密码：<input type="text" ng-model="newPass"></th>
        </tr>
        <tr>
            <th>确认密码：<input type="text" ng-model="againPass"></th>
        </tr>
        <tr>
            <th><button style="width: 100%" ng-click="newUpdate(oldName,newPass,againPass)">提交</button></th>
        </tr>
    </table>
</div>
</body>
</html>
平平淡淡的痛
关注
0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
angularjs实现的员工管理系统

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> *{ padding: 0; margin: 0; } table{ border-collapse: c
复制链接

扫一扫