- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>综合练习</title>
- <style>
- .addUser{
- width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;
- }
- </style>
- <script type="text/javascript" src="js/angular.js" ></script>
- <script type="text/javascript" src="js/angular-route.js" ></script>
- <script type="text/javascript">
- var app = angular.module("myApp",["ngRoute"]);
- //使用config配置路由规则
- app.config(["$routeProvider",function($routeProvider){
- $routeProvider
- .when("/addUser",{
- controller:"addUserCtrl",
- templateUrl:"addUser.html"
- })
- .when("/updatePwd/:name",{
- controller:"updatePwdCtrl",
- templateUrl:"updatePwd.html"
- })
- .otherwise({redirectTo:"/addUser"});
- }]);
- app.controller("myCtrl",function($scope,$location){
- $scope.users = [
- {"id":1,"name":"张三","pwd":"123","age":20,"sex":"男"},
- {"id":2,"name":"李四","pwd":"456","age":33,"sex":"女"},
- {"id":3,"name":"王五","pwd":"789","age":42,"sex":"男"}
- ];
- //定义页面跳转方法
- $scope.goToUrl = function(path){
- alert(path);
- $location.path(path);
- }
- //全部删除
- $scope.del=function(){
- if(confirm("确实删除吗?")){
- $scope.users=[];
- }
- };
- $scope.ageTest=function(age,agesize){
- if(agesize !="--请选择--"){
- var ages=agesize.split("-");
- var ageMin=ages[0];
- var ageMax=ages[1];
- if(age<ageMin || age>ageMax){
- return false;
- }else{
- return true;
- }
- }else{
- return true;
- }
- }
- //批量删除
- $scope.deleteSel=function(){
- var userNames=[];
- for(index in $scope.users){
- if($scope.users[index].state == true){
- userNames.push($scope.users[index].name);
- }
- }
- if(userNames.length>0){
- if(confirm("是否删除选中项?")){
- for(i in userNames){
- var name=userNames[i];
- for(i2 in $scope.users){
- if($scope.users[i2].name==name){
- $scope.users.splice(i2,1);
- }
- }
- }
- }
- }else{
- alert("请选择删除的项")
- }
- }
- });
- //定义添加用户控制器
- app.controller("addUserCtrl",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("updatePwdCtrl",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>
- <h3>用户信息表</h3>
- <div>
- <input ng-model="search" placeholder="用户名查询" size="10" />
- 年龄:<select id="age" ng-model="agesize" ng-init="agesize='--请选择--'">
- <option>--请选择--</option>
- <option>19-30</option>
- <option>31-40</option>
- <option>41-50</option>
- </select>
- 性别:<select>
- <option>男</option>
- <option>女</option>
- </select>
- <input type="button" value="全部删除" ng-click="del()"/>
- <input ng-click="deleteSel()" type="button" value="批量删除"/>
- </div><br />
- <div>
- <table border="1" cellspacing="1" cellpadding="10">
- <thead>
- <tr>
- <th><input type="checkbox"</th>
- <th>id</th>
- <th>用户名</th>
- <th>密码</th>
- <th>年龄</th>
- <th>性别</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="user in users | filter:{'name':search}" ng-if="ageTest(user.age,agesize)">
- <th><input ng-model="user.state" type="checkbox"</th>
- <td>{{user.id}}</td>
- <td>{{user.name}}</td>
- <td>{{user.pwd}}</td>
- <td>{{user.age}}</td>
- <td>{{user.sex}}</td>
- <td><button ng-click="goToUrl('/updatePwd/'+user.name)">修改密码</button> </td>
- </tr>
- </tbody>
- </table>
- </div><br />
- <button class="addUser" ng-click="goToUrl('/addUser')">添加用户</button><br /><br />
- <!-- 1.添加用户页面 -->
- <script type="text/ng-template" id="addUser.html">
- <form action="">
- <table border="1" cellspacing="1" cellpadding="10">
- <tr>
- <th>用户名:</th>
- <td><input ng-model="name" placeholder="请输入用户名" /></td>
- </tr>
- <tr>
- <th>密 码:</th>
- <td><input ng-model="pwd" placeholder="请输入密码" /></td>
- </tr><tr>
- <th>年 龄:</th>
- <td><input ng-model="age" placeholder="请输入年龄" /></td>
- </tr><tr>
- <th>性 别:</th>
- <td><input ng-model="sex" placeholder="请输入性别" /></td>
- </tr>
- <tr align="center">
- <td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
- </tr>
- </table>
- </form>
- </script>
- <!-- 2.修改用户信息页面 -->
- <script type="text/ng-template" id="updatePwd.html">
- <form>
- <table border="1" cellspacing="1" cellpadding="10">
- <tr>
- <th>用户名:</th>
- <td><input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td>
- </tr>
- <tr>
- <th>旧密码:</th>
- <td><input ng-model="oldPwd" placeholder="请输入密码" /></td>
- </tr><tr>
- <th>新密码:</th>
- <td><input ng-model="pwd1" placeholder="请输入密码" /></td>
- </tr><tr>
- <th>确认:</th>
- <td><input ng-model="pwd2" placeholder="请输入密码" /></td>
- </tr>
- <tr align="center">
- <td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td>
- </tr>
- </table>
- </form>
- </script>
- <!-- 6.指定相应内容 -->
- <div ng-view>
- </div>
- </center>
- </body>
- </html>
aj基本增删改查
最新推荐文章于 2022-11-23 17:03:17 发布