ng-disabled with index within ng-repeat angularjs

Question

I want to disable button using ng-disabled within ng-repeat. In this case I want to make like button for every items.

I want to disable the button during http request until it return success result. If I use $scope.btnLikeDisable = true before http request, it will block all Like button.

Here is the code.

<div ng-repeat="item in items">
  <button class="button button-block icon ion-thumbsup"
          ng-model="item.islike" 
          ng-class="item.islike== true?'button-on':'button-light'"
          ng-click="changeLikeState(item.id, $index);"
          ng-disabled="btnLikeDisable"> Like</button>
</div>

This is the function, when the btnLikeDisable is set to true before http then set to false when http request is done

$scope.changeLikeState = function(itemid, index) {
        $scope.btnLikeDisable = true;
        $http.post(Url).then(function(data) {
        }).catch(function(response) {
            console.log(response.data.message); 
        }).finally(function($) {
            $scope.btnLikeDisable = false;
        });
}

How to achive this so it doesnt disable all like buttons ? So far I plan to add ng-disabled="isDisable($index)" but I am not sure how the isDisable($index) works.

Answer 1

You can initialise dummy variable for every item called btnLikeDisable

<div ng-repeat="item in items" ng-init="item.btnLikeDisable=false">
    <button class="button button-block icon ion-thumbsup" ng-model="item.islike" ng-class="item.islike== true?'button-on':'button-light'" ng-click="changeLikeState(item.id, $index);" ng-disabled="item.btnLikeDisable"> Like</button>
  </div>

And, function changes in this way :

$scope.changeLikeState = function(itemid, index) {
        $scope.items[index].btnLikeDisable= true;
        $http.post(Url).then(function(data) {
        }).catch(function(response) {
            console.log(response.data.message); 
        }).finally(function($) {
           $scope.items[index].btnLikeDisable= false;
        });
}