<!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>
angularjs实现的员工管理系统
最新推荐文章于 2022-12-30 17:37:05 发布