javascript - 使用Angular对表格行上的按钮进行动画处理，导致整个行的按钮都进行动画处理

当我在表中使用此代码时：
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>

控制器：

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

控制器：

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

结果：
没有按钮正在设置动画。
我做错什么了？
最好的做法是什么？
如何才能达到正确行的范围？

最佳答案

试试这个：-

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

和控制器：-

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

关于javascript - 使用Angular对表格行上的按钮进行动画处理，导致整个行的按钮都进行动画处理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33521895/