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

最新推荐文章于 2021-06-20 17:58:55 发布

小白的成长之路_

最新推荐文章于 2021-06-20 17:58:55 发布

阅读量353

点赞数

本文链接：https://blog.csdn.net/XiaoZhuang__/article/details/78778682

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>日考</title>
       <script type="text/javascript" src="js/angular.min.js" ></script>
   </head>
   <body ng-app="myapp" ng-controller="mycrl">

       <table border="1px" ng-show="isshow">
           <tr>
               <th>商品名称</th>
               <th>数量</th>
               <th>单价</th>
               <th>小计</th>
               <th>操作</th>
           </tr>
           <tr ng-repeat="g in goods">
               <td>{{g.name}}</td>
               <td>{{g.count}}</td>
               <td>{{g.dj|currency:"RMB￥"}}</td>
               <td>{{g.count*g.dj|currency:"RMB￥"}}</td>
               <td><a href="#" style="text-decoration: none;" ng-click="dele($index)">删除</a></td>
           </tr>
           <tr>
               <td colspan="3" align="right">商品总金额</td>
               <td colspan="2">{{zong|currency:"RMB￥"}}</td>
           </tr>
       </table>

       <script type="text/javascript">
           var mo=angular.module("myapp",[]);
           mo.controller("mycrl",function($scope){
              //定义总金额
              $scope.zong=0;
              $scope.isshow=true;
              $scope.goods=[{"name":"鼠标","count":1,"dj":101},{"name":"键盘","count":3,"dj":601},{"name":"土机","count":1,"dj":3001}];
                //计算总金额
                for (var i = 0; i < $scope.goods.length; i++) {
                   var z=$scope.goods[i].count*$scope.goods[i].dj;
                   $scope.zong=z+$scope.zong;
                }

                //删除的方法
                $scope.dele=function($index){
                   //获取下标计算当前删除商品的金额
                   var z=$scope.goods[$index].count*$scope.goods[$index].dj;
                   //用总金额减去删除金额
                   $scope.zong=$scope.zong-z;
                   //删除当前的商品
                   $scope.goods.splice($index,1);
                   //判断数组是否为空,如果为空就隐藏table表格
                   if($scope.goods.length==0){
                       $scope.isshow=false;
                       alert("购物车为空");
                   }
                };
           });
       </script>
   </body>
</html>