我试图实现Product Cart行为，并且我有一个包含Cart UI元素的导航栏。 UserCart.js服务处理产品添加/删除。此服务在NavController中使用，每次添加或删除产品时都应更新该服务。 Cart元素中的所有UI绑定都能完美地工作，除了我绑定到包含购物车产品信息的关联数组的部分。它的关键是产品ID，值是一个对象{Quantity：Z，CostPerUnit：Y}
UserCart.js
(function() {
// Get reference to the app
var app = angular.module("jargoViewer");
// Create the factory that share the User Cart with various controllers
app.factory('UserCart', function(){
var cart_items = [];
var cart = {
cart_val: 0,
cart_size : 0,
cart_products : [],
cart_prod_ids : []
};
var addProductInCart = function(prodID, prodCostPerUnit, prodQuantity) {
console.log('BEFORE Came inside addProductInCart total_cart_val:'+cart.cart_val);
console.log('Came inside addProductInCart prod:'+prodID + ', costPerUnit:'+prodCostPerUnit+',quantity:' + prodQuantity);
if((prodID in cart_items)) {
// true if "prodID" exist in cart_items
// Add the new prodID key element now
prodObj = cart_items[prodID];
prodObj.Quantity = prodObj.Quantity + prodQuantity;
// TODO DELETE
cartProdObj = cart.cart_products[prodID];
cartProdObj.Quantity = cartProdObj.Quantity + prodQuantity;
} else {
// A product with same key doesnt exists
cart_items[prodID] = {
'Quantity' : prodQuantity,
'CostPerUnit' : prodCostPerUnit
};
// TODO DELETE
cart.cart_products[prodID] = {
'Quantity' : prodQuantity,
'CostPerUnit' : prodCostPerUnit
};
}
// Add the total newly added products cost to Total Cart Value
cart.cart_val += prodCostPerUnit * prodQuantity;
cart.cart_size += 1;
cart.cart_prod_ids.push(prodID);
console.log('AFTER Came inside addProductInCart total_cart_val:'+cart.cart_val);
};
var removeProductInCart = function(prodID, prodQuantity) {
if((prodID in cart_items)) {
// true if "prodID" exist in cart_items
// Add the new prodID key element now
prodObj = cart_items[prodID];
existingQuantity = prodObj.Quantity;
prodCostPerUnit = prodObj.CostPerUnit;
if(prodQuantity > existingQuantity) {
alert('No more of this item exists in the cart!');
} else {
prodObj.Quantity = prodObj.Quantity - prodQuantity;
// Add the total newly added products cost to Total Cart Value
cart.cart_val -= prodCostPerUnit * prodQuantity;
cart.cart_size -= 1;
// TODO DELETE
cartProdObj = cart.cart_products[prodID];
cartProdObj.Quantity = cartProdObj.Quantity - prodQuantity;
if(prodObj.Quantity < 1) {
// No more of this product left in cart, remove from cart list
cart_items.splice(prodID, 1);
// TODO DELETE
cart.cart_products.splice(prodID, 1);
cart.cart_prod_ids.splice(prodID, 1);
}
}
} else {
// Error
alert('No more of this item exists in the cart!');
}
};
// Return the Interface of UserCart
return {
products_in_cart: cart_items,
cart : cart,
addProdInCart : addProductInCart,
delProdInCart : removeProductInCart
};
});
}（））;
nav.html的代码及其控制器NavController.js如下：
(function() {
var app = angular.module("jargoViewer");
var NavController = function($scope, UserCart) {
$scope.userCart = UserCart.cart;
$scope.cart_products = UserCart.products_in_cart;
};
app.controller("NavController", NavController);
}（））;
nav.html
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container" ng-controller = "NavController">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">Jargo Foods</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#/main#page-top"></a>
</li>
<li class="page-scroll">
<a href="#/main#portfolio">Products</a>
</li>
<li class="page-scroll">
<a href="#/main#about">About</a>
</li>
<li class="page-scroll">
<a href="#/main#contact">Contact</a>
</li>
<!--
<li>
<p color:#fff>{{userCart.cart_val}} <i class="glyphicon glyphicon-shopping-cart" color:#fff></i></p>
</li>
-->
<li>
<div class="col-md-3">
<div id="cart" class="btn-group btn-block">
<button type="button" data-toggle="dropdown" class="btn btn-block btn-lg dropdown-toggle">
<i class="fa fa-shopping-cart"></i>
<span >Cart:</span>
<span id="cart-total" ng-show ="userCart.cart_size">{{userCart.cart_size}} item(s) - ₹ {{userCart.cart_val}}</span>
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu pull-right">
<div >{{userCart.cart_products}}</div>
<div class="row" ng-repeat="(id, obj) in userCart.cart_products">{{id}} {{obj}}</div>
<div class="row" ng-repeat="obj in userCart.cart_prod_ids">{{obj}}</div>
<li>
<table class="table table-striped hcart">
<tbody>
<tr ng-repeat="(id, itemObj) in cart_products">
<td class="text-center">
<a href="product.html">
<img src="img/others/cart.png" alt="image" title="image" class="img-thumbnail img-responsive">
</a>
</td>
<td class="text-left">
<a href="product-full.html">
Seeds
</a>
</td>
<td class="text-right">x {{itemObj.Quantity}}</td>
<td class="text-right">₹ {{itemObj.Quantity * itemObj.prodCostPerUnit}}</td>
<td class="text-center">
<a href="#">
<i class="fa fa-times"></i>
</a>
</td>
</tr >
</tbody></table>
</li>
<li>
<table class="table table-bordered total">
<tbody>
<tr>
<td class="text-right"><strong>Sub-Total</strong></td>
<td class="text-left">$1,101.00</td>
</tr>
<tr>
<td class="text-right"><strong>Eco Tax (-2.00)</strong></td>
<td class="text-left">$4.00</td>
</tr>
<tr>
<td class="text-right"><strong>VAT (17.5%)</strong></td>
<td class="text-left">$192.68</td>
</tr>
<tr>
<td class="text-right"><strong>Total</strong></td>
<td class="text-left">$1,297.68</td>
</tr>
</tbody>
</table>
<p class="text-right btn-block1">
<a href="cart.html">
View Cart
</a>
<a href="#">
Checkout
</a>
</p>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
除了以下内容之外，每个绑定都完美无缺：
<div >{{userCart.cart_products}}</div>
<div class="row" ng-repeat="(id, obj) in userCart.cart_products">{{id}} {{obj}}</div>
请帮助确定错误的原因。是否需要为关联数组做一些特殊的事情？
答案 0 :(得分：0)
userCart.cart_products不会引用$ scope中的任何内容。
试试这个
var NavController = function($scope, UserCart) {
$scope.userCart = UserCart.cart;
$scope.userCart.cart_products = UserCart.products_in_cart;
};
您也可以在$ scope中公开UserCart：
var NavController = function($scope, UserCart) {
$scope.userCart = UserCart;
};
并在您的模板中
<div >{{userCart.cart_products}}</div>
<div class="row" ng-repeat="(id, obj) in userCart.products_in_cart">{{id}} {{obj}}</div>
答案 1 :(得分：0)
好的，我发现了问题。作为JS的新手，我无法理解如何定义关联数组（或更准确地说是JS中的MAP）。我正在做的仍然是声明阵列并尝试将其用作MAP
var cart = {
cart_val: 0,
cart_size : 0,
cart_products : [],
cart_prod_ids : []
};
这里有趣的部分是
cart_products : [],
这实际上声明了ARRAY，而不是MAP。要修复代码，我所要做的只是声明MAP而不是数组，所有其他代码保持不变！
cart_products : {},
这将cart_products声明为MAP，然后以下内容将开始工作
<div class="row" ng-repeat="(id, obj) in userCart.cart_products">{{id}} {{obj}}</div>