Угловой: ng-show один повторяющийся элемент

Question

У меня есть таблица, и каждая строка создается с использованием ng-repeat. В одном из столбцов есть значок обновления, который при щелчке выполняет задачу. Однако, пока эта задача выполняется, я хочу, чтобы иконка вращалась; see here.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю один из значков, все они вращаются, а не только на той же строке.

<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 ложь:

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

});