Javascript AngularJS：使加载gif在单击后生效<；李></李>；愤怒地

我正在从服务器获取数据列表，列表中的每个项目都可以单击，并且根据单击的

获取不同的数据。由于某些数据可能非常庞大，我想在单击时在每个项目旁边放置一个

loading.gif

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>

我遇到的问题是，当我单击第一个

时，加载图像将显示在所有列表项上。如何使其仅显示在单击的项目上

---

您必须为列表中的每个项（而不是全局项）添加加载状态，因此，每个项都有一个布尔属性，如

加载

，只有在单击相应项时，该属性才会设置为true。

您必须为列表中的每个项添加加载状态，而不是全局加载状态，因此，每个项都有一个布尔属性，如

加载

，只有在单击相应项时，该属性才会设置为true。

只需创建一个变量来存储所有加载项：

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');
            });
            */
        };
}

---

{{a}
加载。。。

---

jsiddle:

只需创建一个变量来存储所有加载项：

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');
            });
            */
        };
}

---

{{a}
加载。。。

JsFiddle:

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