html+css+angularjs 實現商品庫存資訊管理頁面 可刪除/批量刪除/可模糊查詢/可升序降序
阿新 • • 發佈：2019-01-28
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="angularjs/angular.js"></script> <style> .box{ width: 100%; } .box1{ width: 100%; height: 50px; background: lavender; } .clear:after{ content: "\200B"; display: block; clear: both; } .btn{ background: orange; color: white; border: 0; width: 80px; height: 30px; border-radius: 5px; } .liang{ background: crimson; color: white; border: 0; width: 100px; height: 30px; line-height: 30px; border-radius: 5px; float: right; margin: 10px; } #sou{ width: 200px; height: 30px; border-radius: 3px; margin: 10px; } table{ margin-top: 15px; width: 100%; border-collapse: collapse; text-align: center; } th{ border: 1px solid silver; } /*點選列表頭資訊，如：”商品名稱”時該頭資訊名稱變紅色*/ th:active{color: red} th:hover{color: red} td{ border: 1px solid silver; } </style> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { /*宣告資料物件，初始化商品資訊，資料自擬且不低於四條*/ $scope.goods=[{ gname:"ipad", num:"10", price:"3400", id:2, state:false },{ gname: "aphone", num: "100", price: "6400", id:4, state:false },{ gname: "mypad", num: "20", price: "4400", id:3, state:false },{ gname: "zpad", num: "130", price: "8400", id:5, state:false },{ gname: "iphone X", num: "199", price: "1500", id:1, state:false } ]; /*點選刪除按鈕時彈出提示框詢問使用者確定刪除，使用者點選確定刪除後該條資料在頁面被刪除。*/ $scope.remove=function (index) { if(confirm('確定移除此項嘛？')){ $scope.goods.splice(index,1); } }; /*使用者沒有選中任意複選框時點選批量刪除按鈕提示使用者先進行選中要刪除的商品資訊*/ $scope.pi=function () { for(var i=0;i<$scope.goods.length;i++){ if($scope.goods[i].state==true){ $scope.goods.splice(i,1); i--; } } } /*且該列資料進行正（倒）序排列，再單擊序號則該列資訊資料進行倒（正）序排列。*/ $scope.toggleSort = function(){ $scope.sortIsAsc = !$scope.sortIsAsc; $scope.goods.sort(function(a, b){ if($scope.sortIsAsc){ if (a.id < b.id) { return -1; } if (a.id === b.id) { return 0; } return 1; } if (a.id > b.id) { return -1; } if (a.id === b.id) { return 0; } return 1; }); }; /*點選第一個checkbox,所有的複選框被選中*/ $scope.allCheck=false; $scope.all= function () { for(var i=0;i<$scope.goods.length;i++){ if($scope.allCheck===true){ $scope.goods[i].state=true; }else { $scope.goods[i].state=false; } } }; //每個複選框 $scope.itemCheck = function () { var flag = 0; for(var i = 0; i<$scope.goods.length; i++){ if($scope.goods[i].state == true){ flag ++; } } if(flag == $scope.goods.length){ $scope.allCheck = true; }else{ $scope.allCheck = false; } }; }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <div class="box"> <h1>商品庫存資訊管理</h1> <hr> </div> <div class="box1"> <input type="text" placeholder="輸入關鍵字..." id="sou" ng-model="query"/><button ng-click="pi()" class="liang">批量刪除</button> </div> <table> <tr> <th><input type="checkbox" ng-model="allCheck" ng-click="all()"/></th> <th>商品編號</th> <th>商品名稱</th> <th>商品價格</th> <th>商品庫存</th> <th ng-click="toggleSort()">序號</th> <th>資料操作</th> </tr> <!--用ng-repaet指令將物件遍歷並渲染到頁面中--> <!--Filter實現模糊查詢的功能。使用者在輸入框中鍵入資訊的時候商品列表會動態顯示符合要求的查詢資訊--> <tr ng-repeat="arr in goods | filter:query"> <td><input type="checkbox" ng-model="arr.state" ng-click="itemCheck()"/></td> <td>{{$index+1}}</td> <td>{{arr.gname}}</td> <!--商品價格這一列需要在價格前面加上”￥：”。--> <td>{{arr.price|currency:"￥："}}</td> <td>{{arr.num}}</td> <td>{{arr.id}}</td> <td><button ng-click="remove($index)" class="btn">刪除</button></td> </tr> </table> </body> </html>