使用AngularJS修改、刪除表格資料
阿新 • • 發佈：2019-02-10
需要引入的檔案下載路徑：
angular.js下載： http://download.csdn.net/detail/xin_x1n/9675595
bootstra.js下載 http://download.csdn.net/detail/xin_x1n/9675592
jquery.js下載 http://download.csdn.net/detail/xin_x1n/9675588
bootstrap.css下載 http://download.csdn.net/detail/xin_x1n/9675597
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!-- 因為表格樣式用到了bootstrap所以首先需要引入jquery.js、bootstrap.js和bootstrap.css 然後引入angular.js 按照js中的程式碼就可以實現使用angular技術刪除修改表格了 程式碼中註釋應該都比較完整，如果有不懂的或者建議歡迎留言討論 後面會繼續更新，使用angular中的$http 服務向伺服器請求資訊從後臺獲取資料，這裡先將資料自定義是為了弄明白angularJS的作用域，指令，控制器和檢視 --> <script src="js/jquery-1.12.3.js"></script> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/bootstrap.js"></script> <script src="js/angular.js"></script> <script> //定義模組 var ang = angular.module('module-1',[]); //定義控制器 ang.controller('myCon', function ($scope) { //$scope表示作用域物件，每個控制器都有自己的作用域物件 $scope.arrs = [ {"productid":"FI-SW-01","productname":"Koi"}, {"productid":"K9-DL-01","productname":"Dalmation"}, {"productid":"RP-SN-01","productname":"Rattlesnake"}, {"productid":"RP-LI-02","productname":"Iguana"}, {"productid":"FL-DSH-01","productname":"Manx"}, {"productid":"FL-DLH-02","productname":"Persian"}, {"productid":"AV-CB-01","productname":"Amazon Parrot"} ]; //定義一個空物件 , 用於更新和儲存資料時臨時儲存 $scope.prod = {}; //定義一個單擊刪除按鈕時觸發的事件，用於刪除選中行 $scope.delete = function ($index) { if($index>=0){ if(confirm("是否刪除"+$scope.arrs[$index].productid+"商品") ){ $scope.arrs.splice($index,1); } } }; //定義一個全域性變數idx , 用於儲存選中行的索引，方便執行儲存操作時儲存資料 var idx = -1; //定義一個單擊修改按鈕時觸發的事件，用於單擊後彈出模組視窗用於修改資料 $scope.updata = function ($index) { //顯示bootstrap中的模組視窗 $('#modal-1').modal('show'); //將選中行的資料繫結到臨時物件prod中，在下面的模態視窗中展示出來 $scope.prod.productid = $scope.arrs[$index].productid; $scope.prod.productname = $scope.arrs[$index].productname; //選中行的索引賦值給全域性變數idx idx = $index; }; //定義一個單機儲存按鈕時觸發的事件, $scope.save = function () { //將修改後的值賦給陣列 $scope.arrs[idx].productid = $scope.prod.productid; $scope.arrs[idx].productname = $scope.prod.productname; //關閉模組視窗 $('#modal-1').modal('hide'); } }) </script> </head> <body ng-app="module-1"> <div ng-controller="myCon"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <table class="table"> <tr ng-repeat=" ar in arrs"> <td>{{$index}}</td> <td ng-repeat="a in ar"> {{a}} </td> <td><a href="javascript:void(0)" class="btn btn-primary" ng-click="updata($index)">修改</a> <a ng-click="delete($index)" href="javascript:void(0)" class="btn btn-danger">刪除</a></td> </tr> </table> </div> </div> <div class="modal" id="modal-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"></span> </button> <h3 class="modal-title">修改商品</h3> </div> <div class="modal-body"> <div>商品編號</div> <input ng-model="prod.productid" value="{{prod.productid}}"> <div>商品名稱</div> <input ng-model="prod.productname" value="{{prod.productname}}"> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal">關閉</button> <button class="btn btn-success" ng-click="save()">確定</button> </div> </div> </div> </div> </div> </div> <p></p> </body> </html>