购物车，增加，删除，总价

最新推荐文章于 2021-09-03 14:02:11 发布

scvas

最新推荐文章于 2021-09-03 14:02:11 发布

阅读量382

点赞数 1

本文链接：https://blog.csdn.net/wuzhanbin/article/details/78009567

版权

html 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

购物车

<!DOCTYPE html>
<html>
       <head>
       <meta charset="UTF-8">
       <title>购物车</title>
       <script type="text/javascript" src="../angular-1.5.5/angular-1.5.5/angular.js" ></script>
       <script>
           var app=angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.Product=[{
                   id:1000,
                   name:"iphone8",
                   quantity:1,
                   price:8888
               }, {
                   id: 1001,
                   name: "iPhone9",
                   quantity: 1,
                   price: 9888
               }, {
                   id: 1002,
                   name: "iPhone 2s",
                   quantity: 1,
                   price: 3888
               }, {
                   id: 1003,
                   name: "iPhone 7P+",
                   quantity: 1,
                   price: 10088
               }]
               //减少数量
$scope.reduce = function(index){
   if( $scope.Product[index].quantity > 1){
     $scope.Product[index].quantity--;
       }else{
      $scope.remove(index);
      }
   }
   //添加数量函数
     $scope.add = function(index){
       $scope.Product[index].quantity++;
       }
     //所有商品总价函数
     $scope.totalQuantity = function(){
     var allprice = 0
       for(var i = 0 ; i <$scope.Product.length;i++ ){
       allprice += $scope.Product[i].quantity * $scope.Product[i].price;
      }
     return allprice;
   }
     //购买总数量函数
     $scope.numAll = function(){
    var numAlls = 0
    for(var i = 0 ; i <$scope.Product.length;i++ ){
    numAlls += $scope.Product[i].quantity;
    }
    return numAlls;
}

      //删除当前商品
     $scope.remove = function(index){
       if(confirm("确定要移除数据吗")){
     $scope.Product.splice(index,1)
    }
   }
       //清空购物车
       $scope.removeAll = function(){
       if(confirm("你确定套清空购物车所有商品吗?")){
       $scope.Product = [];
       }
       }
           //解决输入框输入负数时变为1
       $scope.change = function(index){
           if ( $scope.Product[index].quantity >= 1) {
           }else{
           $scope.Product[index].quantity = 1;
           }
       }
       $scope.$watch('Product',function(oldvalue,newvalue){
       console.log(oldvalue);
       console.log(newvalue);
       })
           })
       </script>
       </head>
       <body ng-app="myApp">
        <div ng-controller="myCtrl">
          <table border="" cellspacing="" cellpadding="">
            <tr>
              <th>产品编号</th>
              <th>产品名称</th>
              <th>购买数量</th>
              <th>产品单价</th>
              <th>产品总价</th>
              <th>操作</th>
            </tr>
            <tr ng-repeat="x in Product">

              <td>{{x.id}}</td>
              <td>{{x.name}}</td>
             <td>
            <button ng-click="reduce($index)">-</button>
            <input type="text" class="num"
            ng-model="x.quantity"
            ng-change="change($index)"/>
            <button ng-click="add($index)">+</button>
               </td>
              <td>{{x.price}}</td>
              <td>{{x.price|currency:$}}
               <span ng-bind="totalQuantity()"></span>
              </td>

        <td> <button ng-click="remove($index)" style="background-color:#F00">移除</button>
           </td>

            </tr>
          </table>
          <div id="foot">
          <span>总价:</span>
          <span ng-bind="totalQuantity()"></span>
          <span>购买数量</span>
           <span>{{numAll()}}</span>
            <button ng-click="removeAll()" style="background-color:#F00">清空购物车</button>

          </div>
        </div>
</body>
</html>