在更新我的控制器$ 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>
答案 0 :(得分:1)
在视图中使用ng-model
,以便自动更新这些值。或者,如果您在购物卡丁车中推送多个产品,则可以使用ng-repeat
查看$scope.products