表單新增 刪除 搜尋
阿新 • • 發佈：2019-01-08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jar/angular1.4.6.min.js"></script>
<script src="jar/angular-route.js"></script>
<script src="jar/jquery-3.2.1.js"></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);
$routeProvider
.when("/up",{
controller:"myctrl",
templateUrl:"up.html"})
.when("/add",{
controller:"myctrl",
templateUrl:"add.html"
});
}]);
$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">
<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>
</body>
</html>