angularjs 可新增+修改+刪除
阿新 • • 發佈：2019-02-03
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border: 1px solid #000; border-collapse: collapse; margin: 10px; text-align: center; } tr,td{ border: 1px solid #000; border-collapse: collapse; padding: 10px; } </style> <script src="../../script/angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myctrl",function($scope) { var items=[ {"id":124,"name":"zhang","pass":456,"age":13,"sex":"女"}, {"id":144,"name":"zhangfei","pass":956,"age":23,"sex":"男"}, {"id":134,"name":"zhangcvs","pass":476,"age":33,"sex":"男"}, {"id":224,"name":"zhangsdf","pass":466,"age":18,"sex":"女"} ]; $scope.items=items; $scope.show=false; $scope.unshow=false; $scope.add=function () { $scope.show=true; $scope.unshow=false; }; $scope.action=function () { items.push({ "id": $scope.myid, "name": $scope.myname, "pass": $scope.mypass, "age": $scope.myage, "sex": $scope.mysex }); }; $scope.allcheck=function () { var arr=[]; var is=confirm("確定全部刪除?"); if(is==true) { for (var i = 0; i < items.length; i++) { items[i] = ""; } } } $scope.update=function (item) { console.log(item); $scope.unshow=true; $scope.show=false; $scope.but=function () { for(var i=0;i<items.length;i++){ if(items[i].id==item.id&&$scope.newpass==$scope.surepass&&$scope.oldpass==items[i].pass){ items[i].pass=$scope.newpass; break; }else { confirm("密碼錯誤,請核對資訊"); break; } } } } }); </script> </head> <body ng-app="myapp" ng-controller="myctrl"> <input type="text" ng-model="na"/><input type="text" ng-model="ag"/> 性別:<select ng-model="se"> <option>女</option> <option>男</option> </select> <button ng-click="allcheck()">全部刪除</button> <table> <tr> <td>id</td> <td>使用者名稱</td> <td>密碼</td> <td>年齡</td> <td>性別</td> <td>操作</td> </tr> <tr ng-repeat="item in items | filter:{'name':na} | filter:{'age':ag} | filter:{'sex':se}"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.pass}}</td> <td>{{item.age}}</td> <td>{{item.sex}}</td> <td><button ng-click="update(item)">修改密碼</button></td> </tr> </table> <button ng-click="add()">新增使用者</button> <div ng-show="show"> id:<input type="text" ng-model="myid"/><br> 使用者名稱:<input type="text" ng-model="myname"/><br> 密碼:<input type="text" ng-model="mypass"/><br> 年齡:<input type="text" ng-model="myage"/><br> 性別:<input type="text" ng-model="mysex"/><br> <button ng-click="action()">提交</button> </div> <div ng-show="unshow"> 舊密碼:<input type="text" ng-model="oldpass"/><br> 新密碼:<input type="text" ng-model="newpass"/><br> 確認密碼:<input type="text" ng-model="surepass"/><br> <button ng-click="but()">提交</button> </div> </body> </html>