如何仅在ng-repeat中单击的特定项目旁边显示加载程序符号

Question

这里的问题是，加载器符号正显示在ng-repeat数组中每个项目的旁边。 如何在单击的项目旁边显示加载程序符号

我尝试使用$index但没有运气。

我使用CodePen创建了一个工作示例。 任何人都可以指导如何做。

以下是我的应用摘录。

HTML代码

<ul>
  <li class="listItems" ng-repeat="user in userDetails">
    {{user.name}}, {{user.job}}
    <span class="glyphicon glyphicon-ok markAsChecked" ng-click="markAsChecked()"></span>
    <span ng-show="isLoaderActivated" class="glyphicon glyphicon-repeat loader"></span>
  </li>
</ul>

JS代码

 $scope.markAsChecked = function() {
   console.log("clicked");
   $scope.isLoaderActivated = true;
   $timeout(function() {
     return ($scope.isLoaderActivated = false);
   }, 2000);
 };

Answer 1

您可以找到解决方案CodePan

HTML代码

<ul>
 <li class="listItems" ng-repeat="user in userDetails">
{{user.name}}, {{user.job}}
<span class="glyphicon glyphicon-ok markAsChecked" ng-click="markAsChecked(user)"></span>
<span ng-show="user.isLoaderActivated" class="glyphicon glyphicon-repeat loader"></span>

JS代码

 $scope.markAsChecked = function(item) {
console.log("clicked");
item.isLoaderActivated = true;
$timeout(function() {
  item.isLoaderActivated = false;
}, 2000);
};

Answer 2

您可以在示例中将object作为user传递给函数，然后对其执行操作，而不是全局的$scope

HTML：

  <li class="listItems" ng-repeat="user in userDetails">
    {{user.name}}, {{user.job}}
    <span class="glyphicon glyphicon-ok markAsChecked" ng-click="markAsChecked(user)"></span>
    <span ng-show="user.isLoaderActivated" class="glyphicon glyphicon-repeat loader"></span>
  </li>

控制器：

$scope.markAsChecked = function(item) {
console.log("clicked");
item.isLoaderActivated = true;
$timeout(function() {
  item.isLoaderActivated = false;
}, 2000);

};