gpt4 book ai didi

javascript - Angular : ng-show one repeating element

转载 作者:行者123 更新时间:2023-11-28 01:33:07 26 4
gpt4 key购买 nike

我有一个表,每一行都是使用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>

因此,在我的 Controller 中,我将 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;,但这似乎不起作用。

有什么想法吗?

最佳答案

试试这个

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

});

关于javascript - Angular : ng-show one repeating element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21852969/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com