Question

我正在尝试开发一个购物车，我有产品列表，当用户点击每个产品的详细信息时，我想将每个产品添加到全球地图或用户单击“添加到购物车”按钮时，我怎么能实现这个目标呢？

为了更好地理解这里是我对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>

Answer 1

试试this版本。

此处定义cartService，并在ItemCtrl中注入。所有项目都存储在cart内的cartService数组中。

请注意，只有刷新页面才会有效。如果您希望保留此cart变量，以便在页面刷新期间不会删除它，则应该查看localStorage或$cookies。

Answer 2

在您的情况下，一个简单的位置将购物车存储在主控制器中，因为它可以从嵌套视图的子控制器访问。以下是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>

如果您想多次添加相同的商品，则必须显示订单（或产品序列号）而不是产品。

找到分叉的plunker here。

P.S。：另一种选择是将购物车存放在Angular服务中，该服务将被注入任何需要它的控制器中。

PPS：我一如既往地继续使用$scope，但是您应该将代码更新为最新的Angular用法，例如使用controllerAs语法并使用可以引用{{1}的控制器类。 1}}（以及模板中的控制器名称前缀）代替。

如何在angularjs中创建一个gloabal变量？

2 个答案: