实现form添加、修改、排序、删除
<!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:"addUserCtrl",
templateUrl:"addUser.html"
})
.when("/updatePwd/:name",{
controller:"updatePwdCtrl",
templateUrl:"updatePwd.html"
})
}]);
app.controller("myCtrl",function($scope,$location){
$scope.items=[
{id:1,name:"a",pw:"111",age:20,sex:"男",state:false},
{id:2,name:"b",pw:"222",age:33,sex:"女",state:false},
{id:3,name:"c",pw:"333",age:22,sex:"男",state:false}
];
//排序
$scope.orderColumn="name";
$scope.orderSign="-";
$scope.sortProduct=function(sortColumn){
$scope.orderColumn=sortColumn;
if($scope.orderSign=="-"){
$scope.orderSign="";
}else{
$scope.orderSign="-";
}
}
$scope.ageTest =function(age,ageSize){
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.goToUrl = function(path){
alert(path);
$location.path(path);
}
$scope.removeall=function(){
$scope.items=[];
}
$scope.removesel=function(){
var itemNames=[];
for(index in $scope.items){
if($scope.items[index].state==true){
itemNames.push($scope.items[index].name);
}
}
if(itemNames.length>0){
if(confirm("是否删除选中项")){
for(i in itemNames){
var name=itemNames[i];
for(i2 in $scope.items){
if($scope.items[i2].name==name){
$scope.items.splice(i2,1);
}
}
}
}
}else{
alert("请选择删除项");
}
}
$scope.selectAll=function(){
for(index in $scope.items){
$scope.items[index].state=true;
if($scope.items[index].state==true){
$scope.items[index].state==false;
}
}
}
});
app.controller("addUserCtrl",function($scope){
$scope.addStudent=function(){
$scope.items.push({id:$scope.newId,name:$scope.newName,
pw:$scope.newPw,age:$scope.newAge,sex:$scope.newSex,state:false});
$scope.newId='';
$scope.newName='';
$scope.newPw='';
$scope.newAge='';
$scope.newSex='';
};
});
app.controller("updatePwdCtrl",function($scope,$routeParams){
alert("修改控制器");
$scope.name = $routeParams.name;
$scope.oldPwd = "";
$scope.pwd1 = "";
$scope.pwd2 = "";
//alert($scope.name);
$scope.updatePwd =function(){
for(index in $scope.items){
//alert($scope.users[index].name);
if($scope.items[index].name == $scope.name) {
$scope.items[index].pw = $scope.pwd1;
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" ng-model="search" placeholder="用户名查询" />
<select ng-model="ageSize" id="age" ng-init="ageSize='--请选择--'">
<option>--请选择--</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
</select>
<select ng-model="search3">
<option value=""></option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<button ng-click="removeall()">全部删除</button>
<button ng-click="removesel()">批量删除</button>
<table border="1" cellspacing="0">
<tr>
<td align="center">
<input type="checkbox" ng-click="selectAll()" ng-model="ck"/>
</td>
<td align="center" ng-click="sortProduct('id')">id</td>
<td align="center" ng-click="sortProduct('name')">用户名</td>
<td align="center">密码</td>
<td align="center" ng-click="sortProduct('age')">年龄</td>
<td align="center">性别</td>
<td align="center">操作</td>
</tr>
<tr ng-repeat="x in items|filter:{'name':search,'sex':search3}|orderBy:(orderSign + orderColumn)"
ng-if="ageTest(x.age,ageSize)">
<td><input type="checkbox" ng-model="x.state" ng-checked="ck"/></td>
<td align="center">{{x.id}}</td>
<td align="center">{{x.name}}</td>
<td align="center">{{x.pw}}</td>
<td align="center">{{x.age}}</td>
<td align="center">{{x.sex}}</td>
<td align="center">
<button ng-click="goToUrl('/updatePwd/'+x.name)">修改密码</button>
</td>
</tr>
</table>
<p><button ng-click="goToUrl('/addUser')">添加用户</button></p>
<script type="text/ng-template" id="addUser.html">
<table border="1" cellspacing="1" cellpadding="10">
<tr>
<td>
id:
</td>
<td>
<input type="text" ng-model="newId" placeholder="请输入id" required/>
</td>
</tr>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" ng-model="newName" required placeholder="请输入用户名"/>
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" ng-model="newPw" required placeholder="请输入密码"/>
</td>
</tr>
<tr>
<td>
年龄:
</td>
<td>
<input type="text" ng-model="newAge" required placeholder="请输入年龄"/>
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input type="text" ng-model="newSex" required placeholder="请输入性别"/>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" ng-click="addStudent()" value="提交"/>
</td>
</tr>
</table>
</script>
<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>
<div ng-view>
</div>
</center>
</body>
</html>
网友评论