您的位置：首页 > 其它

购物车加减计算总价

2017-12-20 15:35 218 查看

<!DOCTYPE html>

<html>


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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航