AngularJS实现对用户信息的增删改查

最新推荐文章于 2018-08-28 14:41:22 发布
D_120
最新推荐文章于 2018-08-28 14:41:22 发布
阅读量728
点赞数
本文链接：https://blog.csdn.net/duanzeshan/article/details/78051209
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<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"]);
			var user=[
				{
					"id":1,
					"name":"小明",
					"pwd":111,
					"age":20,
					"sex":"女",
					"state":false
				},
				{
					"id":2,
					"name":"小李",
					"pwd":222,
					"age":5,
					"sex":"女",
					"state":false
				},
				{
					"id":3,
					"name":"小红",
					"pwd":333,
					"age":55,
					"sex":"男",
					"state":false
				}
			];
			app.value("user",user);
			app.config(["$routeProvider",function($routeProvider){
				$routeProvider
				.when("/addUser",{
					controller:"myCtrl",
				 	templateUrl:"addUser.html"
				})
				.when("/updatePwd",{
					controller:"myCtrl",
					templateUrl:"updatePwd.html"
				})
				.otherwise({redirectTo:"/addUser"});
			}]);
			app.controller("myCtrl",function($scope,user,$location){
			//先拿到数组
			$scope.user=user;
			//删除全部
			$scope.delete=function(){
				$scope.user.splice($scope.user);
			}
			//定义页面跳转方法
			$scope.goToUrl=function(path){
				$location.path(path);
			};
			$scope.goToUrl2=function(path){
				$location.path(path);
			};
			//添加用户信息
			$scope.add=function(){
				var newuser=
				{id:$scope.id,
				 name:$scope.name,
				 pwd:$scope.pwd,
				 age:$scope.age,
				 sex:$scope.sex
				};
				//将新数组中的信息放到user数组中
				$scope.user.push(newuser);
			};
			//修改用户信息
			var i=0;
			$scope.update=function($index){
				//将旧密码的值取到
				$scope.oldpwd=$scope.user[$index].pwd;
				//将用户名取到
				$scope.newname=$scope.user[$index].name;
				//拿到数组的下标
				i=$index;
			};
			//提交
			$scope.sum=function(){
				i++;
				//就是将新密码赋值给数组里的就密码
				$scope.user[i].pwd=$scope.newpwd;
			};
			//批量删除
			$scope.deleteSel = function(){
				var userNames = [];
				//遍历users数组，获取状态是选中的user对象的名字
				for(index in $scope.user){
					if($scope.user[index].state == true){
						userNames.push($scope.user[index].name);
					}
				}
					
				if(userNames.length>0){
					if(confirm("是否删除选中项？")){
						for(i in userNames){
							var name = userNames[i];
							for(i2 in $scope.user){
								if($scope.user[i2].name == name){
									$scope.user.splice(i2,1);
								}
							}
						}
					}
				}else{
					alert("请选择删除项");
				}
			}
			});
			
		</script>
		<title></title>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<center>
        <h1 align="center">学生信息管理系统</h1><hr />
		<div>
		<table cellspacing="0" cellpadding="0" border="1">
			<tr>
				<td><input type="text" placeholder="用户名查询" ng-model="queryname"/></td>
				<td><input type="text" placeholder="年龄范围查询" ng-model="queryage"/></td>
				<td>
					性别：<select ng-model="querysex">
						<option>女</option>
						<option>男</option>
					</select>
				</td>
				<td colspan="2"><button ng-click="delete()">全部删除</button></td>
				<td colspan="2"><button ng-click="deleteSel()">批量删除</button></td>
			</tr>
			<tr>
				<th><input type="checkbox" /></th>
				<th>ID</th>
				<th>用户名</th>
				<th>密码</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
			<tr ng-repeat="x in user|filter:{'name':queryname}|filter:{'age':queryage}|filter:{'sex':querysex}">
				<td><input type="checkbox" ng-model="x.state"/></td>
				<td>{{x.id}}</td>
				<td>{{x.name}}</td>
				<td>{{x.pwd}}</td>
				<td>{{x.age}}</td>
				<td>{{x.sex}}</td>
				<td><button ng-click="goToUrl2('/updatePwd');update($index)">修改密码</button></td>
			</tr>
		</table>
		</div>
		<button ng-click="goToUrl('/addUser')">添加用户</button>
		<script type="text/ng-template" id="addUser.html">
			<form action="#">
				<table border="1" cellspacing="0" cellpadding="0">
					<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"/></td>
					</tr>
					<tr>
						<td colspan="2" align="center"><button ng-click="add()">提交</button></td>
					</tr>
				</table>
			</form>
		</script>
		<script type="text/ng-template" id="updatePwd.html" >
			<form>
				<table border="1" cellspacing="0" cellpadding="0">
					<tr>
						<td>用户名：</td>
						<td><input type="text" ng-model="newname"/></td>
					</tr>
					<tr>
						<td>旧密码：</td>
						<td><input type="text" ng-model="oldpwd"/></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"><button ng-click="sum()">提交</button></td>
					</tr>
				</table>
			</form>
		</script>
		<div ng-view>
			
		</div>
		</center>
	</body>
</html>