Question

我想在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>

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

btnLikeDisable

如何实现这一点所以它不会禁用所有类似的按钮？到目前为止，我计划添加$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)"是如何工作的。

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，索引在ng-repeat angularjs内

1 个答案: