HTML angular购物车:加减按钮改变数量+全选+低于1时提示删除商品+计算所有商品总价+清空购物车+单独删除+输入内容小于1时,自动变为1+反选

来源：互联网发布：学编程开发怎样编辑：程序博客网时间：2024/04/30 14:48

<!DOCTYPE html>
<html lang="en">

   <head>
       <meta charset="UTF-8">
       <title>月考练习购物车</title>
       <script type="text/javascript" src="js/angular.js"></script>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
       
       <script>
           var app = angular.module("myApp", []);
           app.controller("myController", function($scope) {

               $scope.user = [{
                       checked: false,
                       name: "qq",
                       price: 11,
                       num: 2,
                       item: "0"
                   },
                   {
                       checked: false,
                       name: "ww",
                       price: 22,
                       num: 2,
                       item: "1"
                   },
                   {
                       checked: false,
                       name: "ee",
                       price: 20,
                       num: 3,
                       item: "2"
                   },
                   {
                       checked: false,
                       name: "rr",
                       price: 12,
                       num: 2,
                       item: "3"
                   }
               ]
               $scope.nc = function(index) {
                   if(confirm("确认删除")) {
                       $scope.user.splice(index, 1)
                       if($scope.user == "") {
                           $(function() {
                               $("div").html("您的购物车为空,<a href='https://www.taobao.com/'>去逛商城</a>");
                           });
                       }
                   }
               }

               //减少数量
               $scope.reduce = function(index) {
                   if($scope.user[index].num > 1) {
                       $scope.user[index].num--;
                   } else {
                       $scope.remove(index);
                   }
               }
               //添加数量函数
               $scope.add = function(index) {
                   $scope.user[index].num++;
               }

               //为0时,删除当前商品
               $scope.remove = function(index) {
                   if(confirm("确定要清空数据吗")) {
                       $scope.user.splice(index, 1)
                       if($scope.user == "") {
                           $(function() {
                               $("div").html("您的购物车为空,<a href='https://www.taobao.com/'>去逛商城</a>");
                           });
                       }
                   }
               }

               //所有商品总价函数
               $scope.totalQuantity = function() {
                   var allprice = 0
                   for(var i = 0; i < $scope.user.length; i++) {
                       allprice += $scope.user[i].num * $scope.user[i].price;
                   }
                   return allprice;
               }

               //清空购物车
               $scope.qs = function() {
                   if(confirm("是否确认清除购物车?")) {
                       $scope.user = [];
                       if($scope.user == "") {
                           $(function() {
                               $("div").html("您的购物车为空,<a href='https://www.taobao.com/'>去逛商城</a>");
                           });
                       }
                   }
               }

               //全选
               $scope.selectAllClick = function(sa) {
                   for(var i = 0; i < $scope.user.length; i++) {
                       $scope.user[i].checked = sa;
                   }
               }

               //反选
               $scope.checkSelectAll = function() {
                   var flag = false;
                   for(index in $scope.user) {
                       if($scope.user[index].checked) {

                       } else {
                           flag = true;
                       }
                   }
                   //至少有一个没有被选中
                   if(flag) {
                       $scope.selectAll = false;
                   } else {
                       $scope.selectAll = true;
                   }
               }
               //解决输入框输入负数时变为1
               $scope.change = function(index) {
                   if($scope.user[index].num >= 1) {

                   } else {
                       alert("最小只能为1");
                       $scope.user[index].num = 1;
                   }
               }

           });
       </script>
       <style>
           .d {
               width: 60%;
               background: gainsboro;
           }

           td {
               background: white;
           }

           span {
               margin: 0 10px;
               font-size: 30px;
           }
       </style>
   </head>

   <body ng-app="myApp" ng-controller="myController">
       <h1>我的购物车</h1>
       <div class="d">
           <button style="float: right;margin-right: 40%;" ng-click="qs()">清空购物车</button>

           <table style="width: 60%; background: gainsboro;margin-top: 40px;float: left;" cellspacing="1px">
               <tr>
                   <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"></td>
                   <td ng-click="togg('name')">name</td>
                   <td ng-click="togg('price')">price</td>
                   <td ng-click="togg('num')">number</td>
                   <td ng-click="togg('totalPrice')">totalPrice</td>
                   <td>option</td>
               </tr>
               <tr ng-repeat="u in user|filter:serch|orderBy:title:desc">
                   <td><input type="checkbox" ng-model="u.checked" ng-checked="u.checked" ng-click="checkSelectAll()"></td>
                   <td>{{u.name}}</td>
                   <td>￥：{{u.price}}</td>
                   <td>
                       <button ng-click="reduce($index)">-</button>
                       <input type="number" ng-model="u.num" ng-change="change($index)" />
                       <button ng-click="add($index)">+</button>
                   </td>
                   <td>￥：{{u.price*u.num}}</td>
                   <td><button ng-click="nc($index)">删除</button></td>
               </tr>
               <tr>
                   <td colspan="6" style="text-align: left;" id="tds">总价为:￥：<span ng-bind="totalQuantity()"></span></td>
               </tr>
           </table>
       </div>
   </body>

</html>

阅读全文

0 0