购物车增加数量总价

最新推荐文章于 2018-04-03 09:32:48 发布

原创最新推荐文章于 2018-04-03 09:32:48 发布 · 456 阅读

CC 4.0 BY-SA版权

<!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>