CODEWITHSUNDEEP
javascripthtmlangularjs
Simo Mafuxwana
Simo Mafuxwana

Reputation: 3762

AngularJS: make loading gif work on clicked <li></li> in an ngReapt

I am getting a list of data from the server, each item on the list is click-able and different data is fetched based on the <li></li> clicked. Since some of the data can be huge, I want to put a loading.gif next to each item when clicked.

HTML:

<ul>
   <li ng-repeat="a in ['item1','item2','item3','item4','item5']" ng-click="getData(a)">
      {{a}}
      <span ng-show="load_selectedNode">
        <img src="../public/assets/img/loading2.gif" width="2%">
        Loading...
      </span>
   </li>
</ul>

Display results of the cliked item:

{{itemData}}

SCRIPT

$scope.$on('LOAD_selectedNode',function() {$scope.load_selectedNode=true}); // loading icon
    $scope.$on('UNLOAD_selectedNode',function() {$scope.load_selectedNode=false});
    $scope.getData = function (a) {
        $scope.$emit('LOAD_selectedNode');
        $http.post('/home',{input: a}).success(function (response) {
            $scope.itemData = response;
            console.log(response);
            $scope.$emit('UNLOAD_selectedNode');
        });
    };

The issue am having is when I clicked on the first <li></li> the loading image will appear on all list items. How do I make it show ONLY on the clicked item?

FIDDLE DEMO

Upvotes: 0

Views: 256

Answers (2)

Mathew Berg
Mathew Berg

Reputation: 28750

Just create a variable to store all the loading items:

app = angular.module('myApp', []);

function myCtrl($scope) {
    $scope.loadedItems = [];
    $scope.$on('LOAD_selectedNode',function() {$scope.load_selectedNode=true}); // loading icon
        $scope.$on('UNLOAD_selectedNode',function() {$scope.load_selectedNode=false});
        $scope.getData = function (a) {
            $scope.loadedItems[a] = true;
            $scope.$emit('LOAD_selectedNode');
            /*$http.post('/fetchDataUrl',{input: a}).success(function (response) {
                $scope.itemData = response;
                console.log(response);
                $scope.$emit('UNLOAD_selectedNode');
            });
            */
        };
}

<div ng-app='myApp' ng-controller='myCtrl'>
    <ul>
       <li ng-repeat="a in ['item1','item2','item3','item4','item5']" ng-click="getData(a)">
          {{a}}
          <span ng-show="loadedItems[a]">
            <img src="../public/assets/img/loading2.gif" width="2%">
            Loading...
          </span>
       </li>
    </ul>
</div>

JsFiddle: http://jsfiddle.net/68t9h/

Upvotes: 2

Kia Raad
Kia Raad

Reputation: 1335

You have to add a loading state to every item on the list not a global one, so every item has a boolean property like loading which will be set to true only when that <li> if the corresponding item is clicked.

Upvotes: 2

Related Questions