AngularJs购物车删除和计算总金额

最新推荐文章于 2021-03-23 13:40:17 发布

小胖胖哈

最新推荐文章于 2021-03-23 13:40:17 发布

阅读量484

点赞数

本文链接：https://blog.csdn.net/xxb52306/article/details/78534141

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>angularJs实现购物车</title>
       <script type="text/javascript" src="../agulajs/angular.js" ></script>
       <script>
           var app=angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.goods=[{
                   name:"鼠标",
                   num:1,
                   price:101
               },{
                   name:"键盘",
                   num:3,
                   price:601
               },{
                   name:"主机",
                   num:1,
                   price:3001
               }];

               //删除数组中指定下标的元素
               $scope.delete=function(index){
                   $scope.goods.splice(index,1);
                   $scope.allPrice=0;
                   for(index in $scope.goods){
                       var zz=$scope.goods[index].num * $scope.goods[index].price;
                       $scope.allPrice=zz+$scope.allPrice;
                   }
               }

               $scope.isshow=function(){
                   if($scope.goods.length>0){
                       return true;
                   }else{
                       return false;
                   }
               }

               $scope.allPrice = 0;
                   for(index in $scope.goods){
                       var zz = $scope.goods[index].num * $scope.goods[index].price;
                       $scope.allPrice = zz + $scope.allPrice;
                   }

           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>我的购物车</h3>
           <table ng-if="isshow()" border="1px solid blue" cellpadding="10" cellspacing="0">
           <thead>
               <tr>
               <th>商品名称</th>
               <th>商品数量</th>
               <th>商品单价</th>
               <th>商品小计</th>
               <th>商品操作</th>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat="good in goods">
                   <td>{{good.name}}</td>
                   <td>{{good.num}}</td>
                   <td>{{good.price | currency:"RMB￥"}}</td>
                   <td>{{good.num * good.price | currency:"RMB￥"}}</td>
                   <td><button ng-click="delete($index)">删除</button></td>
               </tr>
               <tr>
                   <td colspan="3" align="center">总金额</td>
                   <td>{{allPrice | currency:"RMB￥"}}</td>
                   <td></td>
               </tr>
           </tbody>
           </table>
           <p ng-if="!isshow()">购物车为空！</p>
       </center>
   </body>
</html>