Javascript 有棱角的购物车

我创建添加到购物车应用程序。 要单击每个项目并将其添加到购物车。 但首先我需要点击“添加到购物车”按钮，并随着每次点击增加其价值。 当我添加ng repeat时，我不知道如何编写一个函数来负责添加单独的项

angular.module('TransactionApp', [])
.controller('TransactionsCtrl', function($scope) {

   $scope.title = 'Online-store';

   $scope.itemsArray = [
    {  price: 50, name: "Whey protein", img: 'img/item-1.png', quantity: 0},
    {  price: 60, name: "Protein bar", img: 'img/item-2.png', quantity: 0  },
    {  price: 35, name: "BCAA", img: 'img/item-3.png', quantity: 0  },
    {  price: 50, name: "Whey protein", img: 'img/item-1.png', quantity: 0  },
    {  price: 60, name: "Protein bar", img: 'img/item-2.png', quantity: 0  },
    {  price: 80, name: "BCAA", img: 'img/item-3.png', quantity: 0  }

   ];

   // $scope.count = 0;
   $scope.addTo = function(){

   }

});

以下是html：

    <h2 class="title">{{title}} <i class="em em-shopping_bags"></i></h2>
<div class="container">
<div class="row">
  <div class="col-lg-4 col-md-2 col-sm-6">
         <div class="card" style="width: 18rem;" ng-repeat='item in itemsArray'>
      <img class="card-img-top" ng-src={{item.img}} alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title"></h5>
        <p class="card-text">{{item.name}}</p>
        <p class="price">{{ item.price | currency }}</p>
        <a href="#"  class="btn btn-warning" ng-click="addTo()"><i class="em em-shopping_trolley"></i>  Add to cart <span class="number">{{ item.quantity }}</span></a>

        </p>
      </div>
    </div>
  </div>
  </div>
</div>

{{title}
{{item.name}
{{item.price | currency}

使用

添加到（项目）

将项目传递给控制器：

---

使用

添加到（项目）

将项目传递给控制器：

---

我相信视图中的每个项目都有其自己的

添加到购物车

按钮，并且我还相信每次用户单击该项目的按钮时，您都希望增加每个项目的

数量

属性

为此，您只需将该项传递给

addTo（）

方法，如下所示：-

<a href="#"  class="btn btn-warning" ng-click="addTo(item)"><i class="em em-shopping_trolley"></i>  Add to cart <span class="number">{{ item.quantity }}</span></a>

---

我相信视图中的每个项目都有其自己的

添加到购物车

按钮，并且我还相信每次用户单击该项目的按钮时，您都希望增加每个项目的

数量

属性

为此，您只需将该项传递给

addTo（）

方法，如下所示：-

<a href="#"  class="btn btn-warning" ng-click="addTo(item)"><i class="em em-shopping_trolley"></i>  Add to cart <span class="number">{{ item.quantity }}</span></a>

---

在addTo方法中，您需要将项目添加到购物车。@VijayRaheja，我理解，但如何添加？您正在谈论AngularJS（ng重复），是吗？您已将问题标记为“Angular”（此时为ngFor）。项必须具有唯一的Id，您需要在ng click中将该Id传递给addTo（）方法。Inside add从ItemsArray获取项目并添加到cart.ngrepeat中有一个变量$index。使用它，您可以捕获数组中的相应项。看一看addTo方法中的“”，您需要将项目添加到购物车中。@VijayRaheja，我理解，但如何添加？您正在谈论AngularJS（ng重复），是吗？您已将问题标记为“Angular”（此时为ngFor）。项必须具有唯一的Id，您需要在ng click中将该Id传递给addTo（）方法。Inside add从ItemsArray获取项目并添加到cart.ngrepeat中有一个变量$index。使用它，您可以捕获数组中的相应项。看一看“谢谢！这让我很伤心！非常感谢。这让我很伤心！

<a href="#"  class="btn btn-warning" ng-click="addTo(item)"><i class="em em-shopping_trolley"></i>  Add to cart <span class="number">{{ item.quantity }}</span></a>

$scope.addTo = function(var item){
    item.quantity++;
}