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