angular 购物车（+，-），小计，总价

最新推荐文章于 2019-03-08 16:57:12 发布

凉笙默染

最新推荐文章于 2019-03-08 16:57:12 发布

阅读量381

点赞数

本文链接：https://blog.csdn.net/weixin_39599065/article/details/78860761

版权

<!DOCTYPE html>
<html>

    }, {
     mingzi: "wx",
     jiage: 20,
     shuliang: 1

    }, {
     mingzi: "wx",
     jiage: 10,
     shuliang: 1

    }];


    //清空购物车
    $scope.delall = function() {
     $scope.user = [];
     //全部删除，把表格也清除
     $(function(){
       $("table").hide();
      alert(" 购物车为空,去逛商场;");
     })
    }


    //删除
    $scope.del = function(index) {
     if(confirm("确定要删除吗？")) {
      $scope.user.splice(index, 1);
     }
    }


    //+,-号，添加或减少
    //shuliang：是在+，-定义的名字
    $scope.shuliang = function(index, unm) {
     $scope.user[index].shuliang = $scope.user[index].shuliang + unm;
     if($scope.user[index].shuliang <= 0) {
      alert("是否删除该商品");
      $scope.user.splice(index, 1);
     }
    }


    //计算总价
    $scope.zonghe = function() {
     var sum = 0;
     for(var i = 0; i < $scope.user.length; i++) {
      sum += $scope.user[i].jiage * $scope.user[i].shuliang;
     }
     return sum;
    }
   });
  </script>
</head>

<body ng-app="myapp" ng-controller="my">
  <h1>我的购物车</h1>
  <button ng-click="delall()" style="margin-left: 400px;">清空购物车</button>
  <table border="1">
   <tr>
    <td>
     <input type="checkbox" ng-model="quanxuan" />
    </td>
    <td>name</td>
    <td>price</td>
    <td>number</td>
    <td>totaPrice</td>
    <td>option</td>
   </tr>

<tr ng-repeat="i in user">
    <td>
     <input type="checkbox" ng-checked="quanxuan" ng-model="i.shan" />
    </td>
    <td>{{i.mingzi}}</td>
    <td>{{i.jiage | currency:"¥"}}</td>
    
    <td>
     <button ng-click="shuliang($index,+1)">+</button>
     <input ng-model="i.shuliang" />
     <button ng-click="shuliang($index,-1)">-</button>
    </td>
    
    <td>{{i.jiage * i.shuliang}}</td>
    <td>
     <button ng-click="del($indel)">删除</button>
    </td>

    <tr>
     <td colspan="2">总价：</td>
     <td colspan="4">{{zonghe() | currency:"¥"}}</td>
    </tr>
   </tr>
  </table>
</body>

</html>

凉笙默染

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular 购物车（+，-），小计，总价

var app = angular.module("myapp", []); app.controller("my", function($scope) { //模拟数据 $scope.user = [{ mingzi: "qq", jiage: 10, shuliang: 1 }, { mingzi:
复制链接

扫一扫