<!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> | |
AngularJS增删查改(D)
最新推荐文章于 2022-12-07 16:10:11 发布