使用ng-repeat angularjs中的索引禁用ng

Question

我想在ng-repeat中使用ng-disabled禁用按钮。 在这种情况下，我想为每个项目设置“赞”按钮。

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

这是代码。

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