效果图：
1. 主代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用 AngularJS+Route路由+jQuery非空验证 切换不同按钮显示不同html页面功能</title> <style type="text/css"> .leftSide{ width: 18%; float: left; height: 600px; display: inline-block; background-color: #ffc900; } .rightSide{ width: 82%; float: right; height: 600px; display: inline-block; background-color: #00FA9A; } li{ font-size: 30px; font-family: 楷体; margin-left: -40px; list-style-type: none; border: 1px solid blue; padding: 37px 0px 37px 90px; } li a{ text-decoration: none; } </style> <!-- 1.导入库文件 --> <script src="../../js/angular.js"></script> <script src="../../js/angular-route.js"></script> <script> // 2.注入路由服务 var app = angular.module("myApp",['ngRoute']); // 3.在config函数中配置路由规则 app.config(["$routeProvider",function ($routeProvider) { //使用路由服务对象，配置路由规则 $routeProvider .when("/register",{ controller:"registerCtrl", templateUrl:"register.html" }) .when("/main",{ controller:"mainCtrl", templateUrl:"main.html" }) .when("/game",{ controller:"gameCtrl", templateUrl:"game.html" }) .when("/mine",{ controller:"mineCtrl", templateUrl:"mine.html" }) .when("/setting",{ controller:"settingCtrl", templateUrl:"setting.html" }) .otherwise({redirectTo:"/register"}); }]); // 4. 主控制器 app.controller("myCtrl",function ($scope) { }); // 注册页面控制器，验证用户信息 app.controller("registerCtrl",function ($scope) { $scope.name = ""; $scope.pwd = ""; $scope.age = ""; $scope.sex = ""; $scope.tel = ""; $scope.register = function () { $scope.flag1 = false; $scope.flag2 = false; $scope.flag3 = false; $scope.flag4 = false; $scope.flag5 = false; $scope.flag6 = false; $scope.flag7 = false; if ($scope.name == null || $scope.name == ""){ alert("姓名不得为空！"); }else { $scope.flag1 = true; } if ($scope.pwd == null || $scope.name == "" || $scope.pwd.length<6){ alert("密码长度不能小于6位！"); }else { $scope.flag2 = true; } if ($scope.age == null || $scope.age == ""){ alert("年龄不得为空！"); }else { $scope.flag3 = true; } if ($scope.sex == null || $scope.sex == ""){ alert("性别不得为空！"); }else if($scope.sex != "男" && $scope.sex != "女"){ alert("请正确填写性别！"); }else { $scope.flag4 = true; } if ($scope.tel == null || $scope.tel == ""){ alert("联系方式不得为空！"); }else if( $scope.tel.length < 7 || $scope.tel.length > 11){ alert("联系方式所填内容长度必须是7-11位！"); }else { $scope.flag5 = true; } //判断手机号和年龄是否包含字母（汉字） //定义正则表达式 var reg = /\D/; if(reg.test($scope.tel)) { alert("联系方式不能含字母！"); }else { $scope.flag6 = true; } if(reg.test($scope.age)) { alert("年龄不能含字母！"); }else { $scope.flag7 = true; } if($scope.flag1 == true && $scope.flag2 == true && $scope.flag3 == true && $scope.flag4 == true && $scope.flag5 == true && $scope.flag6 == true && $scope.flag7 == true ){ alert("注册成功！"); //注册成功后清空信息 var inputs = document.getElementsByTagName("input"); for(i=0;i<inputs.length;i++){ inputs.item(i).value = ""; } } } }); // 首页 页面控制器，验证用户信息 app.controller("mainCtrl",function ($scope) { /*声明数据对象，初始化用户信息，数据自拟且不低于四条*/ $scope.users = [ { id: 1, name:"金晨", pwd:"123456", age: 21, sex:"女", tel:13100000000, state:false }, { id: 2, name:"金莎", pwd:"234567", age: 23, sex:"女", tel:13200000000, state:false }, { id: 3, name:"吴京", pwd:"345678", age: 43, sex:"男", tel:13300000000, state:false }, { id: 4, name:"胡歌", pwd:"456789", age: 36, sex:"男", tel:13400000000, state:false }, { id: 5, name:"彭于晏", pwd:"567890", age:35 , sex:"男", tel:13500000000, state:false } ]; //点击删除按钮的函数:点击删除按钮时弹出提示框询问用户确定删除，用户点击确定删除后该条数据在页面被删除。 $scope.deleteRow = function (index) { if(confirm("确定删除此项吗？")){ $scope.users.splice(index,1); } } //点击批量删除按钮的函数：用户没有选中任意复选框时点击批量删除按钮提示用户先进行选中要删除的商品信息 $scope.deleteNum = function () { //定义空数组，保存选中项的name var arr = []; //根据下标遍历数据源，把选中项的名字添加到数组中。 for(index in $scope.users){ //判断选项是否为选中的的状态？ if($scope.users[index].state){ arr.push($scope.users[index].name); } } //遍历含有选中项name属性的数组。有多少个被选中，数据源就会被遍历多少遍。 if (arr.length > 0){ if (confirm("是否删除选中项？")){ for (x in arr) { //对比选中项的名字在数组中的角标，根据角标删除当前对象，删一个数据源少一个。 for (y in $scope.users) { if (arr[x] == $scope.users[y].name) { $scope.users.splice(y, 1); } } } } }else { alert("请选择要删除的用户信息！"); } } //复选框全选按钮的全选方法 $scope.selectAll = false; $scope.selectAllFun = function () { if ($scope.selectAll){ //如果点击全选按钮，就把数组的state状态变为true for(index in $scope.users){ $scope.users[index].state = true; } }else { for(index in $scope.users){ $scope.users[index].state = false; } } } //根据数组的角标检测内容是否全选 $scope.checkSelect = function (index) { var temp = 0; if($scope.users[index].state == true){ temp++; }else { temp--; } if (temp == $scope.users.length){ $scope.selectAll = true; }else { $scope.selectAll = true; } var checkState = false; for(i in $scope.users){ if($scope.users[i].state == true){ }else { checkState = true; } } if(checkState){ $scope.selectAll = false; }else { $scope.selectAll = true; } } //判断年龄范围 $scope.ageSize = "---请选择---"; $scope.ageSizeFun = function (age,ageSize) { if(ageSize == "---请选择---"){ return true; }else{ var arr = ageSize.split("-"); var ageMin = arr[0]; var ageMax = arr[1]; if(age >= ageMin && age <= ageMax){ return true; }else { return false; } } } //判断性别 $scope.sexSize = "---请选择---"; $scope.sexSizeFun = function (sex,sexSize) { if(sexSize == "---请选择---"){ return true; }else{ if (sexSize == sex){ return true; }else { return false; } } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <!-- 显示 左侧按钮 菜单栏 --> <div class="leftSide"> <ul> <li><a href="#/register">注册</a></li> <li><a href="#/main">首页</a></li> <li><a href="#/game">游戏</a></li> <li><a href="#/mine">个人</a></li> <li><a href="#/setting">设置</a></li> </ul> </div> <!-- 显示 右侧html页面内容 菜单栏 --> <div class="rightSide" ng-view> </div> </body> </html>
2. main.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页面</title> </head> <body> <center> <h2>用户信息查询表</h2> <div> 姓名：<input type="text" placeholder="请输入姓名" size="10" ng-model="ming"/> 年龄：<select ng-model="ageSize"> <option>---请选择---</option> <option>11-20</option> <option>21-30</option> <option>31-40</option> <option>41-50</option> <option>51-60</option> </select> 性别：<select ng-model="sexSize"> <option>---请选择---</option> <option>男</option> <option>女</option> </select> <button ng-click="deleteNum()" >批量删除</button> <br/><br/> </div> <table border="1px soild yellow" cellpadding="18" cellspacing="0"> <thead> <tr> <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th> <th>id</th> <th>姓名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>联系方式</th> <th>操作</th> </tr> </thead> <tbody> <!-- 用ng-repaet指令将对象遍历并渲染到页面中 --> <!-- filter指令实现模糊查询name的功能。用户在输入框中键入信息的时候商品列表会动态显示符合要求的查询信息 --> <tr ng-repeat="user in users | filter:{name:ming}" ng-model="user.state" ng-if="ageSizeFun(user.age,ageSize)" ng-show="sexSizeFun(user.sex,sexSize)" align="center"> <td><input type="checkbox" ng-click="checkSelect($index)" ng-model="user.state"/></td> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.pwd}}</td> <td>{{user.age}}</td> <td>{{user.sex}}</td> <td>{{user.tel}}</td> <!-- 点击删除按钮，删除整行数据的点击事件 --> <td><button ng-click="deleteRow($index)">删除</button></td> </tr> </tbody> </table> </center> </body> </html>
3. register.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <center> <h3>用户注册信息提交表</h3> <table border="1px soild blue" cellpadding="18" cellspacing="0"> <tbody> <tr> <th>姓名：</th> <td><input type="text" ng-model="name" placeholder="请输入姓名"/></td> </tr> <tr> <th>密码：</th> <td><input type="password" ng-model="pwd" placeholder="请输入密码"/></td> </tr> <tr> <th>年龄：</th> <td><input type="text" ng-model="age" placeholder="请输入年龄"/></td> </tr> <tr> <th>性别：</th> <td><input type="text" ng-model="sex" name="sex" placeholder="请输入性别"/> </td> </tr> <tr> <th>联系方式：</th> <td><input type="text" ng-model="tel" placeholder="请输入联系方式"/></td> </tr> <tr align="center"> <td colspan="2"><button ng-click="register()"> 注册 </button></td> </tr> </tbody> </table> </center> </body> </html>
4. game.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>游戏页面</title> </head> <body> <center> <p style="color: purple;font-size: 56px;line-height: 475px;">Let's play a game</p> </center> </body> </html>
5. mine.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人中心页面</title> </head> <body> <center> <p style="color:yellow;font-size: 56px;line-height: 475px;">欢迎来到我的世界</p> </center> </body> </html>
6. setting.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置页面</title> </head> <body> <center> <p style="color: red;font-size: 56px;line-height: 475px;">Setting</p> </center> </body> </html>