Angulars購物車表格按欄位排序和刪除功能
阿新 • • 發佈:2019-01-22
先來看看佈局中的頁面
<h2>我是購物車</h2> <div class="search"> <input type="text" placeholder="輸入關鍵字…" ng-model="serch"> <button ng-click="moreDel()">批量刪除</button> </div> <table> <thead> <th><input type="checkbox" ng-model="checkAll" ng-click="checkall(checkAll)"></th> <th ng-click="sort('id')" >商品編號<span ng-class="getClass('id')"></span></th> <th ng-click="sort('name')" >商品名稱<span ng-class="getClass('name')"></span></th> <th ng-click="sort('price')">商品價格<span ng-class="getClass('price')"></span></th> <th ng-click="sort('count')">商品庫存<span ng-class="getClass('count')"></span></th> <th ng-click="sort('allmoney')">商品總價<span ng-class="getClass('allmoney')"></span></th> <th>資料操作</th> </thead> <tbody> <tr ng-repeat="item in arr | filter:searchFilter | orderBy:sortOrder:reservse"> <td><input type="checkbox" ng-model="item.check" ng-click="check()"></td> <td>{{item.id}}</td> <td> {{item.name}}</td> <td>{{item.price | currency:"¥"}}</td> <td>{{item.count}}</td> <td>{{item.count*item.price | currency:"¥"}}</td> <td> <button ng-click="remove($index)">刪除</button> </td> </tr> </tbody> <tfoot> <tr> <td colspan="7" style="text-align: right;margin-right: 50px">總價: <span>{{allmoney | currency:"¥"}}</span> 包含運費:<span>{{fire | currency:"¥"}}</span></td> </tr> </tfoot> </table>
自己定義的假資料
var arr = [{"id": 1234, "name": 'ipad', "price": 34, "count": 1, "check": false}, {"id": 1244, "name": 'aphone', "price": 64, "count": 5, "check": false}, {"id": 1334, "name": 'mypad', "price": 44, "count": 2, "check": true}, {"id": 8234, "name": 'zpad', "price": 84, "count": 9, "check": false}, ];
具體的操作,寫在自己的<script></script>,其中的search的預設查詢欄位是name欄位,可以根據需要進行更改
var myapp = angular.module("myapp",[]); /*views介面的控制*/ myapp.controller("newsCtrl", function ($scope) { $scope.arr = arr; //算錢的函式 function money() { //計算總價格 $scope.allmoney = 0; for (var i = 0; i < $scope.arr.length; i++) { $scope.allmoney += $scope.arr[i].price * $scope.arr[i].count; } //計算運費 $scope.fire = 0 if ($scope.allmoney < 1000) { $scope.fire = 10; } //加運費的總價格 $scope.allmoney += $scope.fire; } money(); //刪除的功能 $scope.remove = function (index) { if (window.confirm("確認刪除嗎")) { $scope.arr.splice(index, 1); money(); } if ($scope.arr.length == 0) { $scope.fire = 0; $scope.allmoney = 0; } } //全選按鈕的判斷 $scope.checkAll = false; var checkInput = false; //批量刪除的函式 $scope.moreDel = function () { if ($scope.checkAll == false && checkInput == false) { alert("請選擇要操作的商品"); } else { if (window.confirm("確認刪除")) { for (var i = 0; i < $scope.arr.length; i++) { if ($scope.arr[i].check == true) { $scope.arr.splice(i, 1); i--; } } } } } //判斷多選框是否選中,預設是不選擇 $scope.checkall = function (check) { if (check) { forArr(true); } else { forArr(false); } } //遍歷陣列的方法 function forArr(state) { for (var i = 0; i < $scope.arr.length; i++) { $scope.arr[i].check = state; } } //判斷每個條目前的多選框是否選中 $scope.check = function () { //用來記錄是否全選 var flag = 0; for (var i = 0; i < $scope.arr.length; i++) { if ($scope.arr[i].check == true) { checkInput = true; flag++; } } console.log(flag); if (flag == $scope.arr.length) { $scope.checkAll = true; } else { $scope.checkAll = false; } } //按欄位查詢 $scope.serch = ""; $scope.searchFilter = function (obj) { if ($scope.serch != null) { console.log($scope.serch); if (obj.name.toLowerCase().indexOf($scope.serch.toLowerCase()) != -1) { return true; } else { return false; } } else { return true; } } //排序的功能 $scope.sortOrder = "id"; $scope.reservse = true; $scope.sort = function (ziduan) { console.log(ziduan); if (ziduan == $scope.sortOrder) { $scope.reservse = !$scope.reservse; } else { $scope.reservse = false; } $scope.sortOrder = ziduan; } //新增上下三角 $scope.getClass = function (field) { if ($scope.sortOrder == field) { if ($scope.reservse == true) { return 'top'; } else { return 'bot'; } } } }); 下面是自己的佈局檔案
<style> * { margin: 0; paddding: 0 } /*表格的樣式*/ table { border-collapse: collapse; } td, th { width: 200px; border: 1px solid gainsboro; text-align: center; padding: 20px; } button { width: 100px; height: 40px; background: orange; color: white; border: 0px; border-radius: 5px; } .search { background: ghostwhite; border: 1px solid gainsboro; border-radius: 5px; width: 100%; height: 50px; line-height: 50px; margin-bottom: 10px; } .search input { width: 200px; height: 30px; color: #999; float: left; border-radius: 5px; margin-left: 20px; border: 1px solid gainsboro; margin-top: 7px; } .search button { float: right; margin-top: 5px; margin-right: 10px; background: red; } /*上下三角*/ .top { width: 0; height: 0; display: inline-block; border: 10px solid transparent; border-top: 10px solid red; } .bot { width: 0; height: 0; display: inline-block; border: 10px solid transparent; border-bottom: 10px solid red; } </style>