Javascript AngularJS在点击按钮时更新购物车

更新控制器$scope.products变量后，我需要一些更新视图的帮助

基本上，当用户单击“添加到购物车”按钮时，它需要更新购物车内容视图。我已将代码粘贴到下面

我已在要更新购物车视图的特定行上发表了评论：

非常感谢您的帮助

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

购物
{{item.product_name}



{{item.total_qty}x{{{item.product_price}
项目总数{{cart_Total}

在视图中使用

ng model

，以便自动更新值。或者，如果您在购物车中推送多个产品，您可以使用

ng repeat

查看

$scope.products

您好，感谢您的评论，我意识到我现在没有添加视图。现在将更新我的问题。更新：添加了HTML视图，你能解释一下我把ng模型放在哪里吗？

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