javascript - Angular 上的杂货车

Question

我创建添加到购物车应用程序。想要单击每个商品并将其添加到购物车。但首先我需要单击“添加到购物车”按钮并通过每次单击增加其值(value)。当我添加 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>

Answer 1

使用addTo(item)将项目传递给 Controller ​​:

<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 接受参数之后:

$scope.addTo = function(item){ // 'item' is a reference to an element in itemsArray
  item.quantity++;
}