ng-disabled with index within ng-repeat angularjs

Question

我想在 ng-repeat 中使用 ng-disabled 禁用按钮。在这种情况下，我想为每个项目制作一个按钮。

我想在 http 请求期间禁用该按钮，直到它 return 成功结果。如果我在 http 请求之前使用 $scope.btnLikeDisable = true，它将阻止所有 Like 按钮。

这是代码。

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

这是函数，当btnLikeDisable在http之前设置为true然后在http请求完成时设置为false

$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;
        });
}

如何做到这一点，这样它就不会禁用所有喜欢的按钮？到目前为止，我计划添加 ng-disabled="isDisable($index)" 但我不确定 isDisable($index) 是如何工作的。

Answer 1

您可以为每个名为 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>

并且，函数以这种方式更改：

$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;
        });
}

ng-disabled with index within ng-repeat angularjs

ng-disabled with index within ng-repeat angularjs

angularjs

ionic-framework

angularjs-ng-repeat

angularjs-ng-disabled