在 ng-repeat angular spin.js 中为多个项目加载微调器答案

【问题标题】：Load spinner for multiple items in ng-repeat angular spin.js在 ng-repeat angular spin.js 中为多个项目加载微调器
【发布时间】：2014-06-10 18:41:08
【问题描述】：

Plunker：http://plnkr.co/edit/das1We3T9hY39x8R?p=preview

我的 ng-repeat 中有一个项目列表。

当单击/选择其中一项时，它们将从左列中删除并添加到右列。当它们被放置在右栏中时，应该显示一个微调器。

我无法让它像在 plunker 中的本地构建上那样工作，但我的具体问题是微调器仅在单击列表中的第一项时才会启动。

它在 plunker 中的行为类似，如果您先单击第二个项目，然后单击第二个项目，则微调器会显示。但是，每次将每个项目移动到右列时，我都需要一个微调器来显示它。

一定和下面的userState-{{$index}}和'userState-'+user.id有关

<li class="pull-right">
   <div dw-loading="userState-{{$index}}" 
        dw-loading-options="{overlay: true, text: '', 
           spinnerOptions: {length: 6, width:3, radius: 6}}">
       <a href="" ng-click="remove(sUser)">
          <i class="glyphicons remove inline"></i></a>
    </div>
 </li>




$scope.loadUsers = function(user) {
       $loading.start('userState-'+suspect.id);
   $timeout( function() {
           $loading.finish('userState-'+user.id);
       }, 3000)

     };

谢谢！

【问题讨论】：

标签： javascript jquery angularjs angularjs-ng-repeat spin.js

【解决方案1】：

我查看了问题，还查看了您用于加载的指令。从我的快速概述来看，该指令似乎是围绕 ng-repeat 使用的，而不是用于已重复的每个元素。

我在这里更新了你的 plunk，它的工作方式如下：http://plnkr.co/edit/MDqfWxssNftGlwmC5WZE?p=preview

我将加载指令移到 ng-repeat 之外，如下所示：

<div dw-loading="sSuspectLoading" dw-loading-options="{overlay: true, text: '', spinnerOptions: {length: 6, width:3, radius: 6}}" class="">
    <div ng-repeat="sSuspect in selectedSuspects" class="top-buffer">
        <!-- Repeated content here -->
    </div>
</div>

然后我只是修改了加载开始/结束来调用它：

$loading.start('sSuspectLoading');
$timeout( function() {
    $loading.finish('sSuspectLoading');
}, 3000);

如果您希望每个单独项目上的加载程序而不是整个 ng-repeat，我认为您使用此指令的方式错误，因为它看起来不像是为此而设计的（来自我的快速观察）。

【讨论】：