<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<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"]);
//路由
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/adduser',{controller:"addCtrl",templateUrl:"adduser.html"})
.when('/updatepwd/:name',{controller:"updateCtrl",templateUrl:"updatepwd.html"})
}]);
app.controller("myCtrl",function($scope,$location){
$scope.users=[
{id:1,name:"张三",pwd:"123",age:22,sex:"男",state:false},
{id:2,name:"丽丽",pwd:"666",age:23,sex:"女",state:false},
{id:3,name:"王二",pwd:"888",age:34,sex:"男",state:false},
{id:6,name:"小红",pwd:"999",age:18,sex:"女",state:false},
{id:4,name:"麻子",pwd:"222",age:18,sex:"男",state:false},
{id:8,name:"巾帼",pwd:"555",age:29,sex:"女",state:false},
{id:7,name:"李四",pwd:"444",age:33,sex:"男",state:false}
];
//跳转页面
$scope.goToUrl=function(path){
alert(path);
$location.path(path);
}
//删除
$scope.delect=function(name){
if(name!=""){
if (confirm("是否删除"+name+"商品")) {
var p;
for (index in $scope.users) {
p = $scope.users[index];
if(p.name == name){
$scope.users.splice(index,1);
}
}
}
}
};
//全部删除
$scope.delectAll=function(){
var usersName=[];
for (index in $scope.users) {
if ($scope.users[index].state=true) {
usersName.push($scope.users[index].name);
}
if (usersName.length>0) {
if (confirm("是否删除选中项!")) {
if (i in usersName) {
var name=usersName[i];
for(i2 in $scope.users){
if($scope.users[i2].name == name){
$scope.users.splice(i2,1);
}
}
}
}
}else{
alert("请选择删除项")
}
}
}
});
app.controller("addCtrl",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("updateCtrl",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>
<h1>用户信息表</h1>
<div>
<input type="text" placeholder="用户名查找" ng-model="namea" />
<input type="text" placeholder="年龄查找" ng-model="agea" />
<select ng-model="sexa">
性别:<option>男</option>
<option>女</option>
</select>
<button ng-click="delectAll()">批量删除</button>
</div>
<table border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>
<input type="checkbox" />
</th>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
<th>操作2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in users | filter:{'sex':sexa} | filter:{'name':namea}| filter:{'age':agea}">
<td><input type="checkbox" /></td>
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>{{a.pwd}}</td>
<td>{{a.age}}</td>
<td>{{a.sex}}</td>
<td><button ng-click="goToUrl('/updatepwd/'+a.name)">修改密碼</button></td>
<td><button ng-click="delect(a.name)">删除</button></td>
</tr>
</tbody>
</table><br />
<button ng-click="goToUrl('/adduser')">添加用户</button>
<script type="text/ng-template" id="adduser.html">
<table border="1" cellpadding="10" cellspacing="1">
<tr><td>用户名<input type="text" ng-model="name" placeholder="请输入用户名" /></td></tr>
<tr><td>密码<input type="text" ng-model="pwd" placeholder="请输入密码" /></td></tr>
<tr><td>年龄<input type="text" ng-model="age" placeholder="请输入年龄" /></td></tr>
<tr><td>性别<input type="text" ng-model="sex" placeholder="请输入性别" /></td></tr>
<tr align="center"><td colspan="2"><input type="button" value="提交" ng-click="sub()" /></td></tr>
</table>
</script>
<script type="text/ng-template" id="updatepwd.html">
<table border="1" cellpadding="10" cellspacing="1">
<tr><td>用户名<input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td></tr>
<tr><td>旧密码<input ng-model="oldpwd" placeholder="请输入旧密码" /></td></tr>
<tr><td>新密码<input ng-model="pwd1" placeholder="请输入新密码" /></td></tr>
<tr><td>确认密码<input ng-model="pwd1" placeholder="请确认密码" /></td></tr>
<tr align="center"><td colspan="2"><input type="button" value="提交" ng-click="updatepwd()" /></td></tr>
</table>
</table>
</script>
<div ng-view></div>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<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"]);
//路由
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/adduser',{controller:"addCtrl",templateUrl:"adduser.html"})
.when('/updatepwd/:name',{controller:"updateCtrl",templateUrl:"updatepwd.html"})
}]);
app.controller("myCtrl",function($scope,$location){
$scope.users=[
{id:1,name:"张三",pwd:"123",age:22,sex:"男",state:false},
{id:2,name:"丽丽",pwd:"666",age:23,sex:"女",state:false},
{id:3,name:"王二",pwd:"888",age:34,sex:"男",state:false},
{id:6,name:"小红",pwd:"999",age:18,sex:"女",state:false},
{id:4,name:"麻子",pwd:"222",age:18,sex:"男",state:false},
{id:8,name:"巾帼",pwd:"555",age:29,sex:"女",state:false},
{id:7,name:"李四",pwd:"444",age:33,sex:"男",state:false}
];
//跳转页面
$scope.goToUrl=function(path){
alert(path);
$location.path(path);
}
//删除
$scope.delect=function(name){
if(name!=""){
if (confirm("是否删除"+name+"商品")) {
var p;
for (index in $scope.users) {
p = $scope.users[index];
if(p.name == name){
$scope.users.splice(index,1);
}
}
}
}
};
//全部删除
$scope.delectAll=function(){
var usersName=[];
for (index in $scope.users) {
if ($scope.users[index].state=true) {
usersName.push($scope.users[index].name);
}
if (usersName.length>0) {
if (confirm("是否删除选中项!")) {
if (i in usersName) {
var name=usersName[i];
for(i2 in $scope.users){
if($scope.users[i2].name == name){
$scope.users.splice(i2,1);
}
}
}
}
}else{
alert("请选择删除项")
}
}
}
});
app.controller("addCtrl",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("updateCtrl",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>
<h1>用户信息表</h1>
<div>
<input type="text" placeholder="用户名查找" ng-model="namea" />
<input type="text" placeholder="年龄查找" ng-model="agea" />
<select ng-model="sexa">
性别:<option>男</option>
<option>女</option>
</select>
<button ng-click="delectAll()">批量删除</button>
</div>
<table border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>
<input type="checkbox" />
</th>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
<th>操作2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in users | filter:{'sex':sexa} | filter:{'name':namea}| filter:{'age':agea}">
<td><input type="checkbox" /></td>
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>{{a.pwd}}</td>
<td>{{a.age}}</td>
<td>{{a.sex}}</td>
<td><button ng-click="goToUrl('/updatepwd/'+a.name)">修改密碼</button></td>
<td><button ng-click="delect(a.name)">删除</button></td>
</tr>
</tbody>
</table><br />
<button ng-click="goToUrl('/adduser')">添加用户</button>
<script type="text/ng-template" id="adduser.html">
<table border="1" cellpadding="10" cellspacing="1">
<tr><td>用户名<input type="text" ng-model="name" placeholder="请输入用户名" /></td></tr>
<tr><td>密码<input type="text" ng-model="pwd" placeholder="请输入密码" /></td></tr>
<tr><td>年龄<input type="text" ng-model="age" placeholder="请输入年龄" /></td></tr>
<tr><td>性别<input type="text" ng-model="sex" placeholder="请输入性别" /></td></tr>
<tr align="center"><td colspan="2"><input type="button" value="提交" ng-click="sub()" /></td></tr>
</table>
</script>
<script type="text/ng-template" id="updatepwd.html">
<table border="1" cellpadding="10" cellspacing="1">
<tr><td>用户名<input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td></tr>
<tr><td>旧密码<input ng-model="oldpwd" placeholder="请输入旧密码" /></td></tr>
<tr><td>新密码<input ng-model="pwd1" placeholder="请输入新密码" /></td></tr>
<tr><td>确认密码<input ng-model="pwd1" placeholder="请确认密码" /></td></tr>
<tr align="center"><td colspan="2"><input type="button" value="提交" ng-click="updatepwd()" /></td></tr>
</table>
</table>
</script>
<div ng-view></div>
</center>
</body>
</html>