angularJs实现表格添加删除修改查询功能代码

来源：懂视网责编：小采时间：2020-11-27 20:03:01

angularJs实现表格添加删除修改查询功能代码

angularJs实现表格添加删除修改查询功能代码:本文主要和大家分享angularJs实现表格添加删除修改查询功能代码，希望能帮助到大家。如下所示：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

推荐度：

点击下载本文 文档为doc格式

导读angularJs实现表格添加删除修改查询功能代码:本文主要和大家分享angularJs实现表格添加删除修改查询功能代码，希望能帮助到大家。如下所示：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

本文主要和大家分享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;
}

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

angularJs实现表格添加删除修改查询功能代码

推荐度：

点击下载本文 文档为doc格式

标签：表格代码添加表格

热门焦点

angularJs实现表格添加删除修改查询功能代码

angularJs实现表格添加删除修改查询功能代码

angularJs实现表格添加删除修改查询功能代码

最新推荐

猜你喜欢

热门推荐