Angular JS：仅更改ng-repeat中的单击按钮文本

Question

I am pretty much new to Angular JS. I have some products to display in the home page which I am displaying using ng-repeat. Each product have an 'Add to cart' button which is also displayed using ng-repeat. My problem is, I want to change the text of a particular button I am clicking. I have used 'toggle' and all the buttons text is changing. Please some one help me with this issue.

My HTML Code:

<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>

My angular js code:

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

Answer 1

You need to add a property to the item you are passing in. Then use that property. Changing scope would change all instances.

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>

kind of like above