angular中filter查詢與ng-repeat
阿新 • • 發佈：2019-02-13
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta author="Dabin" title="angular查詢與修改"> <title>Title</title> <style> th, td { padding: 10px; text-align: center; } </style><script src="../angular-1.5.5/angular.min.js"></script> <script> angular.module("myapp", []) .controller("myCtrl", function ($scope) { $scope.arr = [{ id: "1", name: "a", pass: 111, age: 20, sex: "男" }, { id: "2", name: "b", pass: 222, age: 21, sex: "女" }, { id: "3", name: "c", pass: 333, age: 22, sex: "男" }] //刪除 $scope.allDelete = function () { $scope.arr = []; } //點選修改密碼 顯示修改密碼的框 $scope.revamp = function () { $scope.reveal= true; } //提交 $scope.submin = function () { for (var i = 0; i < $scope.arr.length; i++) { if ($scope.arr[i].name == $scope.newName) { if ($scope.pastPass == $scope.arr[i].pass) { if ($scope.newPass == $scope.againPass) { $scope.arr[i].name = $scope.newName; $scope.arr[i].pass = $scope.newPass; //修改成功後,隱藏修改密碼的框 $scope.reveal = false; return } else { alert("兩次密碼不一致"); return } } else { alert("原密碼不對"); return } } } alert("沒有改使用者"); } }) </script> </head> <body ng-app="myapp" , ng-controller="myCtrl"> <input type="text" placeholder="使用者名稱查詢" ng-model="findName"> <input type="text" placeholder="年齡範圍查詢" ng-model="findAge"> <select> <option>性別:</option> <option>男</option> <option>女</option> </select> <button ng-click="allDelete()">全部刪除</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':findName}|filter:{'age':findAge}"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.pass}}</td> <td>{{item.age}}</td> <td>{{item.sex}}</td> <td> <button ng-click="revamp()">修改密碼</button> </td> </tr> </table> <!--修改密碼--> <div ng-show="reveal"> 使用者名稱: <input type="text" ng-model="newName"><br> 舊密碼: <input type="text" ng-model="pastPass"><br> 新密碼: <input type="text" ng-model="newPass"><br> 確定密碼: <input type="text" ng-model="againPass"><br> <button ng-click="submin()">提交</button> </div> </body> </html>