AngularJs 增刪改查+刪除+批量刪除+全反選
阿新 • • 發佈：2018-12-11
<head> <meta charset="utf-8" /> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <title></title> <style type="text/css"> img { height: 60px; width: 60px; } </style> </head> <body ng-app="myApp" ng-controller="myCtrl"> <select ng-model="by"> <option value="">--請選擇--</option> <option value="price">價格正序</option> <option value="-price">價格倒敘</option> <option value="regDate">時間正序</option> <option value="-regDate">時間倒敘</option> </select> <br> <input type="text" placeholder="根據名字進行查詢" ng-model="name" /> <br> <select ng-model="by2"> <option value="">--請狀態查詢--</option> <option value="已發貨">發貨</option> <option value="未發貨">未發貨</option> </select> <br> <input type="button" value="全選" ng-click="qx()" /> <input type="button" value="全不選" ng-click="qbx()" /> <table border="1px" cellspacing="0" cellpadding="0"> <tr ng-repeat="phone in phones|filter:name|orderBy:by|filter:by2"> <td><input type="checkbox" ng-model="phone.ck" /></td> <td><img src=""/></td> <td>{{phone.gname}}</td> <td>{{phone.address}}</td> <td>{{phone.regDate|date:"yyyy-MM-dd"}}</td> <td>{{phone.price|currency:"￥:"}}</td> <!-- 注意語法 --> <td> <input type="text" ng-model="phone.num" /> </td> <td>{{phone.price*phone.num|currency:"￥:"}}</td> <td>{{phone.state}}</td> <td> <input type="button" name="" id="" value="修改" ng-click="xiugai(phone)" /> <input type="button" name="" id="" value="刪除" ng-click="dele(phone.gname)" /> </td> </tr> </table> <span> 總價:{{sum()|currency:"￥:"}} </span> <br> <input type="button" value="增加" ng-click="show()" /> <input type="button" value="批量刪除" ng-click="piliang()" /> <!-- 新增 --> <div class="add" ng-show="add_show"> <fieldset style="width: 300px;height: 250px;"> <legend>新增資訊</legend> <input type="text" placeholder="商品不能為空" ng-model="gname12" /><br> <input type="text" placeholder="價格大於0" ng-model="price12" /><br> <input type="text" placeholder="數量大於0" ng-model="num12" /><br> 請選擇： <br> <select class="sheng" ng-model="sheng12"> </select> <select class="shi" ng-model="shi12"> </select> <input type="button" value="提交" ng-click="save()" /> </fieldset> </div> <!-- 修改 --> <div class="xiu_view" ng-show="xiu_show"> <table border="1px" cellspacing="0" cellpadding="0"> <tr> <td><input type="checkbox" ng-model="phone.ck" /></td> <td><img src="img/one.png" /></td> <td>{{name123}}</td> <td>{{address123}}</td> <td>{{time123|date:"yyyy-MM-dd"}}</td> <td>{{price123|currency:"￥:"}}</td> <!-- 注意語法 --> <td> <input type="text" ng-model="num123" /> </td> <td>{{xj|currency:"￥:"}}</td> <td>{{state123}}</td> <td> <input type="button" name="" id="" value="儲存" ng-click="save123()" /> <input type="button" name="" id="" value="刪除" ng-click="dele(phone.gname)" /> </td> </tr> </table> </div> <script type="text/javascript"> //--------------二級列表 var arr = new Array(); arr["北京"] = new Array("西二旗", "榆垡"); arr["遼寧"] = new Array("瀋陽", "大連"); //填充省的資訊 for(var s in arr) { $(".sheng").append("<option>" + s + "</option>"); } $(".sheng").change(function() { var sh = $(this).val(); var shis = arr[sh]; $(".shi").empty(); for(var i = 0; i < shis.length; i++) { var shi = shis[i]; $(".shi").append("<option>" + shi + "</option>"); } }); //--------------angularjs var m = angular.module("myApp", []); m.controller("myCtrl", function($scope, $http) { $scope.phones = []; //獲取資料 $http.get("phones.json").then(function(response) { $scope.phones = response.data; }); //全選 $scope.qx = function() { for(var i = 0; i < $scope.phones.length; i++) { var g = $scope.phones[i]; g.ck = true; } } $scope.qbx = function() { for(var i = 0; i < $scope.phones.length; i++) { var g = $scope.phones[i]; g.ck = false; } } //計算總價 $scope.sum = function() { var s = 0; for(var i = 0; i < $scope.phones.length; i++) { var g = $scope.phones[i]; var xj = g.num * g.price; s += xj; } return s; } //單個刪除 $scope.dele = function(gname) { var b = confirm("確定刪除嗎？"); if(b) { for(var i = 0; i < $scope.phones.length; i++) { var g = $scope.phones[i]; if(g.gname == gname) { $scope.phones.splice(i, 1); } } } } //批量刪除 $scope.piliang = function() { var flag = false; var b = confirm("確定刪除嗎？"); if(b) { for(var i = $scope.phones.length - 1; i >= 0; i--) { var g = $scope.phones[i]; if(g.ck) { flag = true; $scope.phones.splice(i, 1); } } } if(flag == false) { alert("選一個呀") } } //新增，提交 $scope.save = function() { //驗證名字 var gname = $scope.gname12; if(gname == "" || gname == null || gname == undefined) { alert("名字不為空"); return; } //驗證價格 var price12 = $scope.price12; if(price12 == "" || price12 == null || price12 == undefined) { alert("價格不為空"); return; } if(price12 < 0) { alert("價格需要大於0") return; } //驗證數量 var num12 = $scope.num12; if(num12 == "" || num12 == null || num12 == undefined) { alert("數量不為空"); return; } if(num12 < 0) { alert("數量需要大於0") return; } //地址 var shi = $(".shi").val(); //建立物件 var obj = { "gname": gname, "address": shi, "num": num12, "regDate": "1371120093221", "price": price12, "state": "未發貨" }; $scope.phones.push(obj); //移倉新增頁面 $scope.add_show = false; } //顯示新增頁面 $scope.show = function() { $scope.add_show = true; } //修改 $scope.xiugai = function(phone) { //顯示修改頁面 $scope.xiu_show = true; //回顯資料 $scope.name123 = phone.gname; $scope.address123 = phone.address; $scope.time123 = phone.regDate; $scope.price123 = phone.price; $scope.state123 = phone.state; $scope.num123 = phone.num; $scope.xj = phone.price * phone.num; } //修改完畢之後的儲存 $scope.save123 = function() { //驗證名字 var gname = $scope.name123; //驗證價格 var price12 = $scope.price123; //驗證數量 var num12 = $scope.num123; //地址 var shi = $scope.address123; //建立物件 var obj = { "gname": gname, "address": shi, "num": num12, "regDate": "1371120093221", "price": price12, "state": "未發貨" }; for(var i = $scope.phones.length - 1; i >= 0; i--) { var g = $scope.phones[i]; if(g.gname == gname) { $scope.phones.splice(i, 1, obj); } } //修改頁面後，修改頁面消失 $scope.xiu_show = false; //移倉新增頁面 // $scope.add_show = false; } }); </script> </body>