2017-03-04 89 views
0

我試圖開發一個購物車,我有產品列表,當用戶點擊每個產品的詳細信息時會顯示,我想要添加每個產品到全球地圖或用戶點擊添加到購物車按鈕時,如何我可以做到這一點嗎?如何在angularjs中創建一個全局變量?

更好地瞭解這裏是我的鏈接plunker:https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview

這是我的個人資料頁面,在這裏我想向用戶提供與添加到購物車選項:

<!DOCTYPE html> 

<p>ItemName: {{itemName}}</p> 
<p> ItemPrice: {{itemPrice|currency}}</p> 
<p>ItemRating:{{itemRating}}</p> 
<img src="{{itemImage}}"> 
<p><input type = "submit" value = "Add to Cart" ng-click = "addProduct()"></p> 
+2

使用服務。 AngularJS服務是單身人士。全局變量是邪惡的。 –

回答

0

嘗試this版本。

有一個cartService定義在這裏,並注入您的ItemCtrl。所有項目都存儲在cartService內的cart陣列中。

請注意,此功能一直運行,直到您刷新頁面。如果您想要堅持這個cart變量,以便在頁面刷新期間不會被擦除,您應該查看localStorage$cookies

+0

謝謝,我該如何顯示購物車中的物品以及運行代碼時圖像沒有顯示 – vennapusa

+0

對不起,我編輯了Plunker鏈接以顯示圖像。爲了顯示購物車項目,您可以創建一個名爲'cartDetails.html'的新模板和一個控制器。在你的新控制器中,注入'cartService'並創建一個變量來獲取購物車物品,例如'var carItems = cartService.getCart();'。接下來,在您的'cartDetails.html'中,您可以使用'ng-repeat'顯示您的購物車商品。 – eminlala

+0

嗨,我試圖做你自己的方式,你可以說我要去哪裏錯在這個代碼-https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p =預覽 – vennapusa

0

在你的情況下,一個簡單的地方可以在主控制器中存儲購物車,因爲它可以從嵌套視圖的子控制器訪問。因此,這裏是addProduct()功能如何實現:

app.controller('mobileController', function($scope) { 
    $scope.items = ... 

    $scope.cart = []; 

    $scope.addProduct = function(item) { 
    $scope.cart.push(item); 
    } 
}); 

等功能可以從產品細節控制器被調用,只要你允許它進入觀看item

<input type= "submit" value="Add to Cart" ng-click="addProduct(item)"> 

由於那麼您可以在主控制器視圖中顯示更新的購物車(或在其子視圖中,因爲它仍然可以訪問):

<div ng-repeat="item in cart track by item.name"> 
    <li>{{item.name}}</li> 
</div> 

如果您想要多次添加相同的商品,則必須顯示訂單(或產品序列號)而不是產品。

找到分叉擒縱機構here

P.S .:另一種選擇是將購物車存儲在一個Angular服務中,該服務將被注入任何需要它的控制器中。

PPS:我一直在使用$scope像你一樣,但你應該更新代碼到最新角用途,如使用controllerAs語法和使用控制器類,可以參考this(並在控制器的名稱前綴而不是。