Angular: ng-show one repeating element

Question

I have a table, and each row is generated using ng-repeat . One of the columns has a refresh icon, which when clicked carries out a task. However while this task is being carried out, I'd like the icon to spin; see here .

The issue I'm having is that when I click one of the icons, they all spin, rather than the one on just that row.

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

So in my controller, I set the refreshUserSpin to 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;
            });
    };

});

Now this sends all of the icons into a spin. What is the correct way to handle this, so it only does it for that row.

I've tried doing things like:

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

Then doing $scope.refreshUserSpin.index = true; , but this didn't seem to work.

Any ideas?

Answer 1

Try this

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

});