如下所示：
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Title</title>
<script src=\"agl/angular.min.js\"></script>
<script>
var app=angular.module(\"mpp\",[]);
app.controller(\"ctrl\",function ($scope) {
$scope.arr=[];
$scope.add=function () {
$scope.arr.push({name:$scope.name,password:$scope.password,age:$scope.age,sex:$scope.sex})
}
$scope.submit=function () {
for (var i=0;i<$scope.arr.length;i++)
{
if($scope.arr[i].name==$scope.name2)
{
if($scope.arr[i].password==$scope.pass)
{
if($scope.pass2==$scope.pass){
$scope.arr[i].password=$scope.pass2;
}else{
alert(\"两次输入不一致\");
}
}else {
alert(\"密码错误\");
}
}else {
alert(\"用户名错误\");
}
}
}
$scope.flag=false;
$scope.show=function () {
$scope.flag=true;
}
})
</script>
<link rel=\"stylesheet\" href=\"css/style.css\" rel=\"external nofollow\" >
</head>
<body ng-app=\"mpp\" ng-controller=\"ctrl\">
<div class=\"inner\">
<input type=\"text\" placeholder=\"用户名查询\" ng-model=\"user\">
<input type=\"text\" placeholder=\"年龄范围查询\" ng-model=\"ages\">
<select ng-model=\"sexs\">
<option value=\"男\">男</option>
<option value=\"女\">女</option></select>
<button>全部删除</button>
<TABLE>
<tr>
<th>Id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat=\"item in arr|filter:{name:user}|filter:{age:ages}|filter:{sex:sexs}\">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.password}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button ng-click=\"show()\">修改密码</button></td>
</tr>
</TABLE>
<button ng-click=\"add()\">添加用户</button>
<div class=\"conner\">
<div class=\"add\">
用户名：<input type=\"text\" ng-model=\"name\"><br>
密 码：<input type=\"password\" ng-model=\"password\"><br>
年 龄：<input type=\"text\" ng-model=\"age\"><br>
性 别：<select ng-model=\"sex\">
<option value=\"男\">男</option>
<option value=\"女\">女</option></select><br>
</div>
<div class=\"update\" ng-show=\"flag\">
用户名：<input type=\"text\" ng-model=\"name2\"><br>
旧密码：<input type=\"text\" ng-model=\"pass\"><br>
新密码：<input type=\"password\" ng-model=\"pass2\"><br>
确认密码：<input type=\"password\" ng-model=\"pass3\"><br>
</div>
</div>
<button ng-click=\"submit()\">提交</button>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
.inner{
margin: 20px auto;
text-align: center;
}
table{
margin: 10px auto;
text-align: center;
}
tr{
border-collapse: collapse;
}
tr th,td{
border:1px solid #000000;
width: 60px;
}
.conner{
width: 600px;
height: 300px;
background: #ffe7e0;
margin: 0 auto;
}
.add{
margin: 10px auto;
padding-top: 20px;
width: 260px;
height: 120px;
border: 2px solid #e42112;
}
.update{
width: 280px;
height: 120px;
border: 2px solid #e42112;
text-align: center;
margin: 10px auto;
padding-top: 20px;
}
以上这篇angularJs 表格添加删除修改查询方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容