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>

控制器：

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

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

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>

和控制器： -

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

使用Angular为表格行上的按钮设置动画会导致整行的按钮动画化

1 个答案: