在angularJs中如何通过表格添加删除修改查询方法
- 亚连原创
- 2018-06-04 10:40:421591浏览
下面我就为大家分享一篇angularJs 表格添加删除修改查询方法，具有很好的参考价值，希望对大家有所帮助。
如下所示：
<!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;
}上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue2.0中如何实现自定义 饼状图 (Echarts)组件
以上是在angularJs中如何通过表格添加删除修改查询方法的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn