angularjs路由

最新推荐文章于 2021-03-22 15:06:43 发布
葛村野人
最新推荐文章于 2021-03-22 15:06:43 发布
阅读量156
点赞数
<!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.ageSize = "";//绑定年龄范围
				$scope.users = [
					{"id":1,"name":"张三","pwd":"123","age":22,"sex":"男","state":false},
					{"id":2,"name":"李四","pwd":"456","age":33,"sex":"女","state":false},
					{"id":3,"name":"王五","pwd":"789","age":44,"sex":"男","state":false}
				];
				//定义页面跳转方法
				$scope.goToUrl = function(path){
					alert(path);
					$location.path(path);
				}
				
				//年龄范围过滤
				$scope.ageTest = function(age,ageSize){
					//alert(ageSize);
					//alert(age);
					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 = [];
					//遍历users数组，获取状态是选中的user对象的名字
					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.filter("ageFilter",function(){
				return function(user){
					alert(user);
					/*if(user.age<20 || user.age>22){
						return null;
					}else{
						return user;
					}*/
				}
			});
			
			//定义添加用户控制器
			app.controller("addUserCtrl",function($scope){
				//alert("添加用户控制器");
				$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){
				//alert("修改控制器");
				$scope.name = $routeParams.name;
				$scope.oldPwd = "";
				$scope.pwd1 = "";
				$scope.pwd2 = "";
				//alert($scope.name);
				$scope.updatePwd = function(){
					//alert(pwd1);
					/*if($scope.pwd1 != $scope.pwd2){
						alert("两次密码不一致 ");
					}*/
					
					for(index in $scope.users){
						//alert($scope.users[index].name);
						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 placeholder="用户名查询" size="10" /> 
				<!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" size="10"/>-->
				年龄：<select id="age" ng-model="ageSize" ng-init="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>
					<option>男</option>
					<option>女</option>
				</select> 
				<input type="button" value="全部删除" />
				<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 " ng-if="ageTest(user.age,ageSize)">
							<td><input ng-model="user.state" type="checkbox"/></td>
							<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>
葛村野人
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs路由

综合练习 .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } var app = angular.module("myApp",["ngRoute"]); //使用config配置路由规则 app.config(["$ro
复制链接

扫一扫