Web前端

来源：互联网发布：可靠性分析软件有哪些编辑：程序博客网时间：2024/05/19 03:27

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery-2.1.0.js"type="text/javascript"></script> <script src="angular.js"type="text/javascript"></script> <script src="angular-route.js"type="text/javascript"></script> <script type="text/javascript"> var app=angular.module("myapp",["ngRoute"]); var user=[{"id":"1","name":"张三","pwd":"111","age":"20","sex":"男"}, {"id":"2","name":"李四","pwd":"222","age":"21","sex":"女"}, {"id":"3","name":"王五","pwd":"333","age":"22","sex":"男"}]; app.value("user",user); app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/up",{ controller:"myctrl", templateUrl:"up.html"}) .when("/add",{ controller:"myctrl", templateUrl:"add.html" }); }]); app.controller("myctrl",function($scope,user,$location){ $scope.user=user; $scope.del=function(){ $scope.user.splice($scope.user); }; $scope.goToUrl=function(path){ $location.path(path); }; $scope.goTourl=function(path){ $location.path(path); }; $scope.dd=function(){ var usernew={id:$scope.id, name:$scope.name, pwd:$scope.pwd, age:$scope.age, sex:$scope.sex}; $scope.user.push(usernew); }; var ii=0; $scope.upp=function($index){ $scope.newpwdd=$scope.user[$index].pwd; $scope.newname=$scope.user[$index].name; ii=$index; }; $scope.gmm=function(){ $scope.user[ii].pwd=$scope.newpwd; }; }); </script> <style> .header{ width: 700px; height: 50px; } .name{ margin-top: 10px; } .age{ margin-top: 10px; } .sex{ margin-top: 10px; } .add{ margin-top: 20px; } </style> </head> <body ng-app="myapp" ng-controller="myctrl"> <center> <div class="header"> 用户名:<input type="text" class="name" ng-model="search" /> 年龄：<input type="text" class="age" ng-model="searchone" /> 性别：<select class="sex" ng-model="searchtwo"> <option></option> <option>男</option> <option>女</option> </select> <button ng-click="del()">全部删除</button> </div> <table border="1" cellpadding="20" cellspacing="0"> <tr> <th>id</th> <th>用户名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <tr ng-repeat="u in user | filter:{'name':search} | filter:{'age':searchone} | filter:{'sex':searchtwo}"> <td>{{u.id}}</td> <td>{{u.name}}</td> <td>{{u.pwd}}</td> <td>{{u.age}}</td> <td>{{u.sex}}</td> <td> <button ng-click="goToUrl('/up');upp($index)" >修改密码</button> </td> </tr> </table> <button class="add" ng-click="goTourl('/add')">添加用户</button> <script type="text/ng-template" id="up.html"> <form action="#"> <table> <tr> <td>用户名: </td> <td><input type="text" ng-model="newname" /></td> </tr> <tr> <td>旧密码: </td> <td><input type="text" ng-model="newpwdd" /></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"> <input type="button" ng-click="gmm()" value="提交" /> </td> </tr> </table> </form> </script> <script type="text/ng-template" id="add.html"> <form action="#"> <table> <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" /><br /></td> </tr> <tr> <td colspan="2" align="center"><input type="button" ng-click="dd()" value="提交" /></td> </tr> </table> </form> </script> <div ng-view> </div> </center> </body> </html>

阅读全文

0 0