AngularJS 用户管理系统-优快云博客

本文链接：https://blog.youkuaiyun.com/MyqueenLove/article/details/78045185

	<!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>

用户表单