javascript - 使用 Angular 为表格行上的按钮设置动画，导致整行的按钮设置动画

Question

当我在我的表格中使用这段代码时:HTML:

<td><button type="submit" ng-disabled="isMyProduct(item)" ng-click="addProductToMe($index, item)">submit
<span ng-show='addProdcutsToMeSpinner === true'><i class="glyphicon glyphicon-refresh spinning"></i></span>
</button></td>

Controller :

 $scope.addProductToMe = function($index, item) {
    $scope.addProdcutsToMeSpinner = true;
}

结果:所有行的所有按钮开始动画。我只想为点击的特定按钮制作动画。

我认为如果我使用这段代码:HTML:

<td><button type="submit" ng-disabled="isMyProduct(item)" ng-click="addProductToMe($index, item)">submit
<span ng-show='addProdcutsToMeSpinner[index] == true'><i class="glyphicon glyphicon-refresh spinning"></i></span>
</button></td>

Controller :

 $scope.addProductToMe = function($index, item) {
    $scope.addProdcutsToMeSpinner[$index] = true;
}

结果:没有按钮是动画的。我究竟做错了什么？这样做的最佳做法是什么？如何到达正确行的范围？

Answer 1

试试这个:-

<td><button type="submit" ng-disabled="isMyProduct(item)" ng-      click="addProductToMe($index, item)">submit
<span ng-show='addProdcutsToMeSpinner === $index'><i class="glyphicon glyphicon-refresh spinning"></i></span>
</button></td>

和 Controller :-

  $scope.addProductToMe = function($index, item) {
        $scope.addProdcutsToMeSpinner = $index;
    }