角度：ng-显示一个重复元素

Question

我有一张桌子，每一行都是使用ng-repeat生成的。 其中一列具有刷新图标，单击该图标即可执行任务。 但是，在执行此任务时，我希望旋转图标。 看这里 。

我遇到的问题是，当我单击其中一个图标时，它们全部旋转，而不是仅在那一行上旋转。

<td class="text-center">
    <i ng-hide="refreshUserSpin" ng-click="refreshUser($index, user.id)" class="fa fa-refresh pointer"></i>
    <i ng-show="refreshUserSpin" class="fa fa-refresh fa-spin "></i>
</td>

因此，在控制器中，我将refreshUserSpin设置为false：

app.controller('usersController', function($scope, Users) {

    $scope.refreshUserSpin = false;

    $scope.refreshUser = function(index, community_id) {

        $scope.refreshUserSpin = true;

        Users.refreshUser(community_id)
            .success(function(data) {

                $scope.users[index] = data.json;
                $scope.refreshUserSpin = false;
            });
    };

});

现在，这会将所有图标旋转。 处理此问题的正确方法是什么，因此仅针对该行执行此操作。

我试过做类似的事情：

<i ng-show="refreshUserSpin.$index" class="fa fa-refresh fa-spin "></i>

然后做$scope.refreshUserSpin.index = true; ，但这似乎不起作用。

有任何想法吗？

Answer 1

尝试这个

HTML

<td class="text-center">
    <i ng-hide="refreshUserSpin[$index]" ng-click="refreshUser($index, user.id)" class="fa fa-refresh pointer"></i>
    <i ng-show="refreshUserSpin[$index]" class="fa fa-refresh fa-spin "></i>
</td>

JS

app.controller('usersController', function($scope, Users) {

    $scope.refreshUserSpin = {};

    $scope.refreshUser = function(index, community_id) {

        $scope.refreshUserSpin[index] = true;

        Users.refreshUser(community_id)
            .success(function(data) {

                $scope.users[index] = data.json;
                $scope.refreshUserSpin[index] = false;
            });
    };

});