angularJs 表格添加删除修改查询方法

2019-11-19 14:17:11

字体：大中小

来源：转载

供稿：网友

如下所示：

<!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 表格添加删除修改查询方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：浅析Visual Studio Code断点调试Vue

下一篇：ExtJs整合Echarts的示例代码