溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了AngularJS如何實現(xiàn)表格的增刪改查，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。
用AngularJS實現(xiàn)對表格的增刪改查（僅限前端），具體代碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>實現(xiàn)表格的增刪改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" > <link rel="stylesheet" href="css/font-awesome.css" type="text/css"></link> <link rel="stylesheet" href="css/ui.css" type="text/css"></link> <link rel="stylesheet" href="css/form.css" type="text/css"></link> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .add{ position:relative; top:-40px; left:1000px; } </style> </head> <body> <div ng-app="myapp" ng-controller="myCtrl"> <h3>管理信息：</h3><br> <p>搜索：<input type="text" placeholder="請輸入關(guān)鍵字" ng-model="test"></p> <button class="btn btn-primary add" ng-click="add()">添加</button> <table class="table table-bordered" > <thead> <tr> <td>姓名</td> <td>年齡</td> <td>城市</td> <td>操作</td> </tr> </thead> <tbody> <tr ng-repeat="x in texts | filter:test"> <td>{{x.name}}</td> <td>{{x.age}}</td> <td>{{x.city}}</td> <td> <button class="btn btn-warning"" ng-click="update($index)">修改</button> <button class="btn btn-danger" ng-click="del($index)">刪除</button> </td> </tr> </tbody> </table> <!-- 添加信息 --> <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> <h4 class="modal-title">添加信息</h4> </div> <div class="modal-body"> <div>姓名：</div> <input ng-model="newName" type="text"> <div>年齡：</div> <input ng-model="newAge" type="text"> <div>城市：</div> <input ng-model="newCity" type="text"> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal">關(guān)閉</button> <button class="btn btn-success" ng-click="save()">保存</button> </div> </div> </div> </div> <!-- 修改信息 --> <div class="modal" id="modal-2"> <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> <h4 class="modal-title">修改信息</h4> </div> <div class="modal-body"> <div>姓名：</div> <input ng-model="prod.name" value="{{prod.name}}" type="text"> <div>年齡：</div> <input ng-model="prod.age" value="{{prod.age}}" type="text"> <div>城市：</div> <input ng-model="prod.city" value="{{prod.city}}" type="text"> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal">關(guān)閉</button> <button class="btn btn-success" ng-click="ensure()">確定</button> </div> </div> </div> </div> </div> <script type="text/javascript"> var app = angular.module('myapp',[]); app.controller('myCtrl',function($scope){ //定義表格內(nèi)容 $scope.texts = [ {name:"張三",age:"23",city:"海南"}, {name:"李四",age:"25",city:"香港"}, {name:"王五",age:"25",city:"濟南"}, {name:"劉六",age:"22",city:"濟南"}, {name:"李七",age:"35",city:"煙臺"}, {name:"張八",age:"32",city:"聊城"}, {name:"呂九",age:"30",city:"盤錦"} ]; //定義一個空對象，用于保存和修改數(shù)據(jù)時臨時存儲 $scope.prod = {}; //定義一個單擊刪除按鈕時觸發(fā)的事件，用于刪除選中行 $scope.del = function ($index) { if($index>=0){ if(confirm("是否刪除"+$scope.texts[$index].name) ){ $scope.texts.splice($index,1); } } }; //定義一個全局變量idx,用于存儲選中行的索引，方便執(zhí)行保存操作。idx取值為0、1、、、、都有用，所以暫取值為-1; var idx = -1; //定義一個點擊添加按鈕時觸發(fā)的事件，用于新增數(shù)據(jù) $scope.add = function(){ //顯示bootstrap中的模塊窗口 $('#modal-1').modal('show'); }; //定義一個點擊保存按鈕時觸發(fā)的事件 $scope.save = function(){ //將添加的值賦給數(shù)組 $scope.texts.name = $scope.newName; $scope.texts.age = $scope.newAge; $scope.texts.city = $scope.newCity; $scope.texts.push({name:$scope.newName,age:$scope.newAge,city:$scope.newCity}); //關(guān)閉模塊窗口 $('#modal-1').modal('hide'); }; //定義一個點擊修改按鈕時出發(fā)的事件，用于修改數(shù)據(jù) $scope.update = function($index){ //顯示bootstrap中的模塊窗口 $('#modal-2').modal('show'); //將選中行的數(shù)據(jù)綁定到臨時對象prod中，在下面的模態(tài)窗口中展示出來 $scope.prod.name = $scope.texts[$index].name; $scope.prod.age = $scope.texts[$index].age; $scope.prod.city = $scope.texts[$index].city; //選中行的索引賦值給全局變量idx idx = $index; }; //定義一個點擊確定按鈕時觸發(fā)的事件, $scope.ensure = function () { //將修改后的值賦給數(shù)組 $scope.texts[idx].name = $scope.prod.name; $scope.texts[idx].age = $scope.prod.age; $scope.texts[idx].city = $scope.prod.city; //關(guān)閉模塊窗口 $('#modal-2').modal('hide'); }; }); </script> </body> </html>
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“AngularJS如何實現(xiàn)表格的增刪改查”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
