angular實現購物車自動計算價格程式碼例項

antzone發表於2017-04-17
Angular

分享一段程式碼例項，它利用angular實現了購物車自動計算價格的功能。

點選或者減少商品的數量會自動實現價格總額的計算。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html lang="en" ng-app="myCart">
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-controller="cartCtr">
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>產品編號</th>
        <th>產品名字</th>
        <th>購買數量</th>
        <th>產品單價</th>
        <th>產品總價</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in cart">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>
          <button type="button" ng-click="reduce($index)" class="btn btn-primary">-</button>
          <input type="number" id="inp" value="{{item.quantity}}" ng-model="item.quantity"/>
          <button type="button" ng-click="add($index)" class="btn btn-primary">+</button>
        </td>
        <td>{{item.price}}</td>
        <td>{{item.quantity*item.price}}</td>
        <td><button type="button" class="btn btn-danger" ng-click="remove($index)">刪除</button></td>
      </tr>
      <tr ng-show="!cart.length">
        <td colspan="6">您的購物車為空</td>
      </tr>
      <tr>
        <td>總購買價格：{{totalPrice()}}</td>
        <td>總購買數量：{{totalQuantity()}}</td>
        <td colspan="4" align="center"><button type="button" ng-click="cart={}" class="btn btn-danger">清空購物車</button></td>
      </tr>
    </tbody>
  </table>
</div>
<script>
var mod = angular.module("myCart", []);
mod.service("cartData", function() {
  return [{
    id: 1000,
    name: 'iphone5s',
    quantity: 3,
    price: 4300
  }, {
    id: 3300,
    name: 'iphone5',
    quantity: 30,
    price: 3300
  }, {
    id: 232,
    name: 'imac',
    quantity: 4,
    price: 23000
  }, {
    id: 1400,
    name: 'ipad',
    quantity: 5,
    price: 6900
  }];
});
mod.controller("cartCtr", ["$scope", "cartData", function($scope, cd) {
  //把注入進來的資料cd，儲存到變數cart中
  $scope.cart = cd;
  //當點選刪除按鈕的時候，刪除當前購物車的一條資料
  $scope.remove = function(index) {
      $scope.cart.splice(index, 1);
    }
    //得到總購買價格
  $scope.totalPrice = function() {
      var total = 0;
      angular.forEach($scope.cart, function(item) {
        total += item.price * item.quantity;
      })
      return total;
    }
    //得到總購買數量
  $scope.totalQuantity = function() {
      var total = 0;
      angular.forEach($scope.cart, function(item) {
        total += parseInt(item.quantity);
      })
      return total;
    }
    //點選+號的時候，數量加一
  $scope.add = function(index) {
      $scope.cart[index].quantity++;
    }
    //點選-號的時候，數量減一，當減到<1的時候，直接刪除這一條資料
  $scope.reduce = function(index) {
      if ($scope.cart[index].quantity > 1) {
        $scope.cart[index].quantity--;
      } else {
        $scope.remove(index);
      }
    }
    //當購物車某商品的數量小於1時，輸入的值指定為oldValue
  $scope.$watch("cart", function(newValue, oldValue) {
    console.log(newValue, oldValue)
    angular.forEach(newValue, function(item, key) {
      if (item.quantity < 1) {
        item.quantity = oldValue[key].quantity;
      }
    })
  }, true)
}])
</script>
</body>
</html>

相關文章