购物车

最新推荐文章于 2023-03-10 17:32:05 发布

yushengniwo

最新推荐文章于 2023-03-10 17:32:05 发布

阅读量196

点赞数

本文链接：https://blog.csdn.net/yushengniwo/article/details/78853324

版权

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../../js/angular/angular.js"></script>
  <script>
   var app = angular.module("myApp", []);
   app.controller("myCtrl", function($scope) {
    $scope.shops = [{
     name: "苹果",
     price: 3,
     num: 5,
     state: false
    }, {
     name: "梨子",
     price: 4,
     num: 2,
     state: false
    }, {
     name: "香蕉",
     price: 3,
     num: 3,
     state: false
    }];

    //数量减一
    $scope.lessNum = function(shop) {
     if(shop.num >= 1) {
      shop.num--;
      $scope.zongjai = 0;
      for(index in $scope.shops) {
       if($scope.shops[index].state) {
        $scope.zongjai = ($scope.shops[index].price * $scope.shops[index].num) + $scope.zongjai;
       }
      }
     }
    }
    //数量加一
    $scope.addNum = function(shop) {
     shop.num++;
     $scope.zongjai = 0;
     for(index in $scope.shops) {
      if($scope.shops[index].state) {
       $scope.zongjai = ($scope.shops[index].price * $scope.shops[index].num) + $scope.zongjai;
      }
     }
    }

    //计算总价
    $scope.zongjai = 0;
    $scope.sum = function() {
     for(index in $scope.shops) {
      if($scope.shops[index].state) {
       $scope.zongjai = ($scope.shops[index].price * $scope.shops[index].num) + $scope.zongjai;
      }
     }
    }
   })
  </script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <center>
   <h3>购物车</h3>
   <table border="1px solid blue" cellpadding="10" cellspacing="0">
    <thead>
     <tr>
      <th><input type="checkbox" /></th>
      <th>商品名</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>操作</th>
     </tr>
    </thead>
    <tbody>
     <tr ng-repeat="shop in shops">
      <td>
       <input type="checkbox" ng-click="sum()" ng-model="shop.state" />
      </td>
      <td>{{shop.name}}</td>
      <td>{{shop.price}}</td>
      <td>
       <button ng-click="lessNum(shop)">-</button>
       <input type="text" size="1" value="{{shop.num}}" />
       <button ng-click="addNum(shop)">+</button>
      </td>
      <td width="50px"><button>删除</button></td>
     </tr>
     <tr>
      <td colspan="5">
       总价：<span ng-bind="zongjai"></span>元
      </td>
     </tr>
    </tbody>
   </table>
  </center>
</body>

</html>