Angular：ng顯示一個重複元素

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

});