Home > Article > Web Front-end > How to add, delete, modify query methods through tables in angularJs
How to add, delete, modify query methods through tables in angularJs
- 亚连Original
- 2018-06-04 10:40:421554browse
Below I will share with you an angularJs table addition, deletion and modification query method. It has a good reference value and I hope it will be helpful to everyone.
looks like this:
<!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">
<p 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>
<p class="conner">
<p 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>
</p>
<p 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>
</p>
</p>
<button ng-click="submit()">提交</button>
</p>
</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;
}above I compiled it for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to download images in node.js
How to use eventBus in vue to implement sibling components Communication
How to implement a custom pie chart (Echarts) component in vue2.0
The above is the detailed content of How to add, delete, modify query methods through tables in angularJs. For more information, please follow other related articles on the PHP Chinese website!