AngularJS

来源：互联网发布：淘宝大学教程百度云编辑：程序博客网时间：2024/06/10 21:39

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <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"]);
           //路由
           app.config(['$routeProvider',function($routeProvider){
               $routeProvider
               .when('/adduser',{controller:"addCtrl",templateUrl:"adduser.html"})
               .when('/updatepwd/:name',{controller:"updateCtrl",templateUrl:"updatepwd.html"})

           }]);
           app.controller("myCtrl",function($scope,$location){
               $scope.users=[
                   {id:1,name:"张三",pwd:"123",age:22,sex:"男",state:false},
                   {id:2,name:"丽丽",pwd:"666",age:23,sex:"女",state:false},
                   {id:3,name:"王二",pwd:"888",age:34,sex:"男",state:false},
                   {id:6,name:"小红",pwd:"999",age:18,sex:"女",state:false},
                   {id:4,name:"麻子",pwd:"222",age:18,sex:"男",state:false},
                   {id:8,name:"巾帼",pwd:"555",age:29,sex:"女",state:false},
                   {id:7,name:"李四",pwd:"444",age:33,sex:"男",state:false}
               ];
               //跳转页面
               $scope.goToUrl=function(path){
                   alert(path);
                   $location.path(path);
               }
               //删除
               $scope.delect=function(name){
                   if(name!=""){
                       if (confirm("是否删除"+name+"商品")) {
                           var p;
                              for (index in $scope.users) {
                                    p = $scope.users[index];
                                    if(p.name == name){
                                        $scope.users.splice(index,1);
                                    }
                                }
                       }
                   }
               };
               //全部删除
               $scope.delectAll=function(){
                   var usersName=[];
                   for (index in $scope.users) {
                       if ($scope.users[index].state=true) {
                           usersName.push($scope.users[index].name);
                       }
                       if (usersName.length>0) {
                           if (confirm("是否删除选中项！")) {
                               if (i in usersName) {
                                   var name=usersName[i];
                                   for(i2 in $scope.users){
                                       if($scope.users[i2].name == name){
                                           $scope.users.splice(i2,1);
                                       }
                               }
                               }

                           }

                       }else{
                           alert("请选择删除项")
                       }
                   }



               }

           });
           app.controller("addCtrl",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("updateCtrl",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>
           <h1>用户信息表</h1>
           <div>
               <input type="text" placeholder="用户名查找" ng-model="namea" />
               <input type="text" placeholder="年龄查找" ng-model="agea" />
               <select ng-model="sexa">
                   性别：<option>男</option>
                   <option>女</option>
               </select>
               <button ng-click="delectAll()">批量删除</button>
           </div>
           <table border="1" cellpadding="5" cellspacing="0">
               <thead>
                   <tr>
                       <th>
                           <input type="checkbox" />
                       </th>
                       <th>id</th>
                       <th>用户名</th>
                       <th>密码</th>
                       <th>年龄</th>
                       <th>性别</th>
                       <th>操作</th>
                       <th>操作2</th>
                   </tr>
               </thead>
               <tbody>
                   <tr ng-repeat="a in users | filter:{'sex':sexa} | filter:{'name':namea}| filter:{'age':agea}">
                       <td><input type="checkbox" /></td>
                       <td>{{a.id}}</td>
                       <td>{{a.name}}</td>
                       <td>{{a.pwd}}</td>
                       <td>{{a.age}}</td>
                       <td>{{a.sex}}</td>
                       <td><button ng-click="goToUrl('/updatepwd/'+a.name)">修改密碼</button></td>
                       <td><button ng-click="delect(a.name)">删除</button></td>
                   </tr>
               </tbody>
           </table><br />
           <button ng-click="goToUrl('/adduser')">添加用户</button>

           <script type="text/ng-template" id="adduser.html">
               <table border="1" cellpadding="10" cellspacing="1">
                   <tr><td>用户名<input type="text" ng-model="name" placeholder="请输入用户名" /></td></tr>
                   <tr><td>密码<input type="text" ng-model="pwd" placeholder="请输入密码" /></td></tr>
                   <tr><td>年龄<input type="text" ng-model="age" placeholder="请输入年龄" /></td></tr>
                   <tr><td>性别<input type="text" ng-model="sex" placeholder="请输入性别" /></td></tr>
                   <tr align="center"><td colspan="2"><input type="button" value="提交" ng-click="sub()" /></td></tr>
               </table>
           </script>
           <script type="text/ng-template" id="updatepwd.html">
               <table border="1" cellpadding="10" cellspacing="1">
                   <tr><td>用户名<input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td></tr>
                   <tr><td>旧密码<input ng-model="oldpwd" placeholder="请输入旧密码" /></td></tr>
                   <tr><td>新密码<input ng-model="pwd1" placeholder="请输入新密码" /></td></tr>
                   <tr><td>确认密码<input ng-model="pwd1" placeholder="请确认密码" /></td></tr>
                   <tr align="center"><td colspan="2"><input type="button" value="提交" ng-click="updatepwd()" /></td></tr>
                   </table>
               </table>
           </script>

           <div ng-view></div>



       </center>


   </body>
</html>

阅读全文

0 0