2
私はProduct Cartの動作を実装しようとしていますが、Cart UIエレメントを含むナビゲーションバーがあります。サービスUserCart.jsは、製品の追加/削除を処理します。このサービスは、NavControllerで使用されます.NavControllerは、製品が追加または削除されるたびに更新される必要があります。 Cart要素のすべてのUIバインディングは、カート製品情報を含む連想配列にバインドしている部分を除いて、完全に機能します。そのキーは、商品IDであり、値がオブジェクトである{数量：Z、CostPerUnit：Y}angularJSの連想配列でバインディングに失敗する
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>
間違っているものを理解する助けてください。連想配列のために特別なことが必要ですか？
を取得している作業を開始するでしょうか？ – Ved
'NavController'がDOMのその部分をコントロールしていますか？ –
'userCart.cart_products'はオブジェクトの配列です、そうですか？代わりに 'obj in userCart.cart_products'を試してみてください。あなたのバインディングでは、 '{{id}} 'の代わりに' {{$ index}} 'を使うことができます。また、Angularバインディングがどのようにオブジェクトをレンダリングするのか分かりません。obj.Quantityのように 'obj'の実際のプロパティを印刷しようとします。 – crizzis