aj学生管理系统

来源：互联网发布：淘宝网童装男童编辑：程序博客网时间：2024/04/28 11:54

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <script type="text/javascript" src="js/angular.js"></script>
       <script type="text/javascript" src="js/angular-route.js"></script>
       <script>
           var app=angular.module("myApp",["ngRoute"]);
           var user=[
               {
                   "id":1,
                   "name":"小明",
                   "pwd":111,
                   "age":20,
                   "sex":"女",
                   "state":false
               },
               {
                   "id":2,
                   "name":"小李",
                   "pwd":222,
                   "age":5,
                   "sex":"女",
                   "state":false
               },
               {
                   "id":3,
                   "name":"小红",
                   "pwd":333,
                   "age":55,
                   "sex":"男",
                   "state":false
               }
           ];
           app.value("user",user);
           app.config(["$routeProvider",function($routeProvider){
               $routeProvider
               .when("/addUser",{
                   controller:"myCtrl",
                  templateUrl:"addUser.html"
               })
               .when("/updatePwd",{
                   controller:"myCtrl",
                   templateUrl:"updatePwd.html"
               })
               .otherwise({redirectTo:"/addUser"});
           }]);
           app.controller("myCtrl",function($scope,user,$location){
           //先拿到数组
           $scope.user=user;
           //删除全部
           $scope.delete=function(){
               $scope.user.splice($scope.user);
           }
           //定义页面跳转方法
           $scope.goToUrl=function(path){
               $location.path(path);
           };
           $scope.goToUrl2=function(path){
               $location.path(path);
           };
           //添加用户信息
           $scope.add=function(){
               var newuser=
               {id:$scope.id,
               name:$scope.name,
               pwd:$scope.pwd,
               age:$scope.age,
               sex:$scope.sex
               };
               //将新数组中的信息放到user数组中
               $scope.user.push(newuser);
           };
           //修改用户信息
           var i=0;
           $scope.update=function($index){
               //将旧密码的值取到
               $scope.oldpwd=$scope.user[$index].pwd;
               //将用户名取到
               $scope.newname=$scope.user[$index].name;
               //拿到数组的下标
               i=$index;
           };
           //提交
           $scope.sum=function(){
               i++;
               //就是将新密码赋值给数组里的就密码
               $scope.user[i].pwd=$scope.newpwd;
           };
           //批量删除
           $scope.deleteSel = function(){
               var userNames = [];
               //遍历users数组，获取状态是选中的user对象的名字
               for(index in $scope.user){
                   if($scope.user[index].state == true){
                       userNames.push($scope.user[index].name);
                   }
               }

               if(userNames.length>0){
                   if(confirm("是否删除选中项？")){
                       for(i in userNames){
                           var name = userNames[i];
                           for(i2 in $scope.user){
                               if($scope.user[i2].name == name){
                                   $scope.user.splice(i2,1);
                               }
                           }
                       }
                   }
               }else{
                   alert("请选择删除项");
               }
           }
           });

       </script>
       <title></title>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
        <h1 align="center">学生信息管理系统</h1><hr />
       <div>
       <table cellspacing="0" cellpadding="0" border="1">
           <tr>
               <td><input type="text" placeholder="用户名查询" ng-model="queryname"/></td>
               <td><input type="text" placeholder="年龄范围查询" ng-model="queryage"/></td>
               <td>
                   性别：<select ng-model="querysex">
                       <option>女</option>
                       <option>男</option>
                   </select>
               </td>
               <td colspan="2"><button ng-click="delete()">全部删除</button></td>
               <td colspan="2"><button ng-click="deleteSel()">批量删除</button></td>
           </tr>
           <tr>
               <th><input type="checkbox" /></th>
               <th>ID</th>
               <th>用户名</th>
               <th>密码</th>
               <th>年龄</th>
               <th>性别</th>
               <th>操作</th>
           </tr>
           <tr ng-repeat="x in user|filter:{'name':queryname}|filter:{'age':queryage}|filter:{'sex':querysex}">
               <td><input type="checkbox" ng-model="x.state"/></td>
               <td>{{x.id}}</td>
               <td>{{x.name}}</td>
               <td>{{x.pwd}}</td>
               <td>{{x.age}}</td>
               <td>{{x.sex}}</td>
               <td><button ng-click="goToUrl2('/updatePwd');update($index)">修改密码</button></td>
           </tr>
       </table>
       </div>
       <button ng-click="goToUrl('/addUser')">添加用户</button>
       <script type="text/ng-template" id="addUser.html">
           <form action="#">
               <table border="1" cellspacing="0" cellpadding="0">
                   <tr>
                       <td>ID：</td>
                       <td><input type="text" ng-model="id"/></td>
                   </tr>
                   <tr>
                       <td>用户名：</td>
                       <td><input type="text" ng-model="name"/></td>
                   </tr>
                   <tr>
                       <td>密码：</td>
                       <td><input type="text" ng-model="pwd"/></td>
                   </tr>
                   <tr>
                       <td>年龄：</td>
                       <td><input type="text" ng-model="age"/></td>
                   </tr>
                   <tr>
                       <td>性别：</td>
                       <td><input type="text" ng-model="sex"/></td>
                   </tr>
                   <tr>
                       <td colspan="2" align="center"><button ng-click="add()">提交</button></td>
                   </tr>
               </table>
           </form>
       </script>
       <script type="text/ng-template" id="updatePwd.html" >
           <form>
               <table border="1" cellspacing="0" cellpadding="0">
                   <tr>
                       <td>用户名：</td>
                       <td><input type="text" ng-model="newname"/></td>
                   </tr>
                   <tr>
                       <td>旧密码：</td>
                       <td><input type="text" ng-model="oldpwd"/></td>
                   </tr>
                   <tr>
                       <td>新密码：</td>
                       <td><input type="text" ng-model="newpwd"/></td>
                   </tr>
                   <tr>
                       <td>确认密码：</td>
                       <td><input type="text" /></td>
                   </tr>
                   <tr>
                       <td colspan="2" align="center"><button ng-click="sum()">提交</button></td>
                   </tr>
               </table>
           </form>
       </script>
       <div ng-view>

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

阅读全文

0 0