AngularJS單擊按鈕即可更新購物車

Question

更新控制器$ scope.products變量后，我需要一些幫助更新視圖。

基本上，當用戶單擊“添加到購物車”按鈕時，它需要更新購物車內容視圖。 我已經粘貼了下面的代碼。

我在要更新購物車視圖的特定行上發表了評論：

  //TBD : update the cartController view, how?? 

任何幫助非常感謝，謝謝！

    'use strict';

    var giftShopApp = angular.module('giftShopApp', []);

    giftShopApp.factory('storeFactory', function($http) {
      return {
        getProducts : function(callback) {
          //$http.get('php/db.php?action=products').success(callback);
          $http.post('php/db.php', { 'action' : 'products' }).success(callback);
        },
        getProductCategories: function(callback) {
          $http.post('php/db.php', {'action': 'product_categories'}).success(callback);
        },
        getProductSuppliers: function(callback) {
          $http.post('php/db.php', {'action': 'product_suppliers'}).success(callback);
        },
        addProduct: function(product, callback) {
          $http.post('php/db.php', {'action': 'addProduct', 'params': product}).success(callback);
        },
        updateProduct: function(callback) {
          $http.post('php/db.php', {'action': 'updateProduct'}).success(callback);
        },
      }
    });

    giftShopApp.factory('cartFactory', function($http) {
      return {
        getCartItems : function(callback) {
          $http.post('php/db.php', {'action' : 'getCartItems' }).success(callback);
        },
        clearItems : function(callback) {
          $http.post('php/db.php', {'action' : 'clearCart' }).success(callback);
        },
        addItemToCart: function(params, callback) {
          $http.post('php/db.php', {'action': 'addItemToCart', 'params' : params}).success(callback);
        }
      }

});

giftShopApp.controller('StoreController', function($scope, storeFactory, cartFactory) {
  storeFactory.getProducts(function(results) {
    $scope.products = results.products; 
  });
  $scope.addToCart = function(id, price, qty){
   //TBD: Check stock level on PHP side
   console.info('qty');
   console.log(qty);
   var params = {'product_id': id, 'qty': qty, 'price': price}; 
   cartFactory.addItemToCart(params, (function(results) {
     //TBD : update the cartController view, how??
     if (results.success) {
       console.log('update cart');
     }
   }));
  };
});

giftShopApp.controller('CartController', function($scope, cartFactory) {
  $scope.cart_total = 0; 
  cartFactory.getCartItems(function(results) {
    var items = results.rows;
    var cart_total = 0;
    $scope.total_amount = 0;
    $scope.items = items; 
    items.forEach(function(o){
      cart_total += parseInt(o.total_amount,10);
    });
    $scope.cart_total = cart_total;
  });
  //checkout
  //increase qty
  //decrease qty
  $scope.clearItems = function() {
    //$scope.items = [];
  }
});

更新：添加了購物車視圖

<div class="span2 pull-right"  style="width: 200px;" ng-controller="CartController">
  <div class="nav-list">
    <div id="BSCart" class="collections ui-droppable">
      <div class="ShoppingCartHead" style="">
        <img style="width: 28px;" id="BSC_animation_cart" class="slideUp" src="../images/shoppingcart_yellow.png"></img>
          Shopping
      </div>
      <div class="ShoppingCart" style="margin-bottom: 10px;" ng-repeat="item in items">
        {{item.product_name}}
        <br></br> 
        <div class="pull-right" >{{item.total_qty}} x {{item.product_price}}</div>
      </div>
      <div class="ShoppingCartFoot">
        <div id="BSC_animation_count" class="slideDown">
          <!-- Total 3 products -->
          Total items R {{cart_total}}
          <br></br>
          <div class="pull-right"></div>   
        </div>
        <br></br>
        <!-- add route here to full shopping cart href=#/cart -->
        <a href="#/cart">View shopping cart / Checkout</a>
      </div>
    </div>
  </div>
</div>

Answer 1

在視圖中使用ng-model ，以便值將自動更新。 否則，如果您要在購物卡丁車中推送多種產品，則可以使用ng-repeat來查看$scope.products存在的所有商品。