如下所示：
<!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 表格添加刪除修改查詢方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
