在 ng-repeat angularjs 中使用索引禁用 ng答案

【问题标题】：ng-disabled with index within ng-repeat angularjs在 ng-repeat angularjs 中使用索引禁用 ng
【发布时间】：2018-09-09 17:48:24
【问题描述】：

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

我想在 http 请求期间禁用按钮，直到它返回成功结果。如果我在 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) 是如何工作的。

【问题讨论】：

标签： angularjs ionic-framework angularjs-ng-repeat angularjs-ng-disabled

【解决方案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;
        });
}

【讨论】：