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

Question

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

I have a list of items in my ng-repeat.

When one of these items is clicked/selected, They're removed from the left column and added to the right column. As they are placed in the right column a spinner should show.

I've not been able to get it to work as it does on my local build within the plunker but my specific problem is that the spinner only kicks off when the first item in the list is clicked.

It sort of behaves similarly in the plunker in that if you click the second item first and then the second, the spinner shows. However I need one spinner to show per item every time it is moved to the right column.

It must have something to do with the userState-{{$index}} and 'userState-'+user.id below

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

     };

Thanks!

Answer 1

I took a look at the issue, and also looked at the directive you were using for loading. From my quick overview, it looks like this directive is used around an ng-repeat rather than on each element that has been repeated.

I updated your plunk here with it working like that: http://plnkr.co/edit/MDqfWxssNftGlwmC5WZE?p=preview

I moved the loading directive outside the ng-repeat like this:

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

Then I just modified the load start/end to call that instead:

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

If you're wanting the loader on each individual item as opposed the entire ng-repeat, I think you're going about it the wrong way using this directive as it doesn't look like it's designed for that (from my quick observations).