javascript - Angular JS : Change only clicked button text in ng-repeat

Question

我对 Angular JS 还很陌生。我有一些产品要在主页中显示，我正在使用 ng-repeat 显示这些产品。每个产品都有一个“添加到购物车”按钮，该按钮也使用 ng-repeat 显示。我的问题是，我想更改我单击的特定按钮的文本。我使用了“切换”，所有按钮的文本都在变化。请有人帮我解决这个问题。

我的 HTML 代码:

<div class="col-md-3 col-sm-6" ng-repeat="item in products">
     <div class="thumbnail">
          <image src="{{item.imageUrl}}"></image>
     </div>
     <div>
          <button class="btn btn-primary" ng-click="toggle(item)">{{buttonText}}</button>
     </div>
</div>

我的 Angular js代码:

var toggle = false;  
$scope.toggle = function(item){
    $scope.buttonText = toggle ? 'Add To Cart' : 'Remove From Cart';
    toggle=!toggle;
}

Answer 1

您需要向您传入的项目添加一个属性。然后使用该属性。更改范围会更改所有实例。

var toggle = false;  
$scope.toggle = function(item){
    item.buttonText = toggle ? 'Add To Cart' : 'Remove From Cart';
    toggle=!toggle;
}

<div class="col-md-3 col-sm-6" ng-repeat="item in products">
     <div class="thumbnail">
          <image src="{{item.imageUrl}}"></image>
     </div>
     <div>
          <button class="btn btn-primary" ng-click="toggle(item)">{{item.buttonText}}</button>
     </div>
</div>

有点像上面