Javascript 仅在数组的索引元素中显示加载程序/微调器

我有一个数组，每当你与数组中的任何项目交互时，我都会显示一个加载器。我的问题是，如果数组中有7个元素，那么在每个元素上都会看到加载器，我不希望这样，我只需要在与之交互的元素[index]中显示加载器

$scope.showLLoader = function() {
  _.each($scope.lineItems, function(lines) {
    _.each(lines, function(line, index) {
      //HERE I NEED TO DISPLAY THE LOADER
      console.log(line, index);

      $scope.displayLoader = true;

      $timeout(function() {$scope.linesLoader = false;}, 300);

    });
  });
}

模板

<div>
  <div class="row">
    <div>
      <div ng-repeat="lineItem in lineItems">
        <div ng-repeat="lineLeague in lineItem | filter:search">
          <div>
            <div>
              <div>
                <span ng-show="linesLoader" class="pull-right"><div class="spinner"></div></span>
              </div>
            </div>

          </div>
          <table>
            <tbody ng-repeat="line in lineLeague | filter:search">
              <tr>
                <td>
                  <span ng-bind-html="::line.gameName"></span>
                </td>
              </tr>
              <tr ng-repeat="row in line.rows">
                <td>
                  {{::line.gameDateMonth}}
                </td>
                <td>{{::row.nss}}</td>
                <td><span>{{::row.name}}</span></td>
                <td>
                  <a>
                    <span ng-hide="row.noSpread">{{::row.spread.spread}} ({{::row.spread.moneyLine}})</span>
                  </a>
                  <a href="javascript:void(0);" ng-show="row.spreadAvailable"
                     ng-click="addLineToBetSlip(line, row, 'spread')">
                    <span ng-hide="row.noSpread">{{::row.spread.spread}}</span>
                  </a>
                </td>
                <td>
                  <a>
                    <span>{{::row.total.type}}</span>
                  </a>
                  <a ng-click="addLineToBetSlip(line, row, 'total')">
                    <span>{{::row.total.type}}</span>
                  </a>
                </td>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

---

我做了一个指令，用于每个元素和每个调用服务器。如果您需要Ajax交互

---

向指令中注入带有服务的控制器。

如果我理解正确，您希望在用户单击的任何内容中都出现一个加载器。如果是这样，那么听起来您需要为每个单元格创建一个模型，如果用户单击该模型，可以将其切换为true或false

考虑到这一点，您可能会使用某种嵌套的指令安排来重做它，但是如果这是您的目标，那么下面的实现应该为您提供一个不错的起点。希望能有帮助

app.js

index.html

---

用户以何种方式与数组中的元素“交互”？点击，鼠标悬停，按键？我们可以看看显示这些数组元素的模板吗？让我们看看html。最好是一个plunker/fiddle。请参阅模板@MattHerbstritt，它是通过单击表格的单元格来实现的，这是用户交互的方式。

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

app.controller('MainCtrl', function($scope, $timeout) {

  $scope.linesLoader  = true;

  $scope.lineItems = [
    [
      [
        {
          gameDateMonth: 'June',
          gameName: 'Foo Game',

          rows: [
            {

              nss: 'nss1',
              name: 'name1',
              noSpread: false,

              total: {
                type: 'tType',
              },

              spread: {
                spread: 'spread1',
                moneyLine: 'mLine',
                spreadAvailabel: true
              },

              showLoader: true
            },

            {

              nss: 'nss2',
              name: 'name2',
              noSpread: false,

              total: {
                type: 'tType2',
              },

              spread: {
                spread: 'spread2',
                moneyLine: 'mLine2',
                spreadAvailabel: true
              },

              showLoader: true
            }
          ]

        }
      ]
    ],

    [

    ],

    [

    ]
  ];

  $scope.showCoords = {
      rowIndex: 0,
      cellIndex: 0
    };

    var rowcount  = $scope.lineItems[0][0][0].rows.length,
        cellcount = 5;

  $scope.cellLoaders = createCellLoaderModels(2, cellcount);
  $scope.showLoaderAt = showLoaderAt;

  function showLoaderAt(rowIndex, key){

    $scope.showCoords = {
      rowIndex: rowIndex,
      key: key
    }

    $scope.cellLoaders[rowIndex][key] = true;

    $timeout(function(){
      $scope.cellLoaders[rowIndex][key] = false;
    }, 300);

  }

   function createCellLoaderModels(rowcount, cellcount){

      var i, j, 

          cellLoaders = [];

      for(i = 0; i < rowcount; i++){

        cellLoaders[i] = [];

        for(j = 0; j < cellcount; j++){
         cellLoaders[i][j] = false;
        }
      }

      return cellLoaders;
  }


});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    <div>

      <div class="row">

        <div>

          <div ng-repeat="lineItem in lineItems">

            <div ng-repeat="lineLeague in lineItem | filter:search">

              <div>

                <div>
                  <div>
                    <span ng-show="linesLoader" class="pull-right"><div class="spinner"></div></span>
                  </div>
                </div>

              </div>

              <table>

                <tbody ng-repeat="line in lineLeague | filter:search" >


                  <tr>
                    <td>
                      <span ng-bind-html="::line.gameName">{{line.gameName}}</span>
                    </td>
                  </tr>

                  <tr ng-repeat="row in line.rows" ng-init="rowIndex = $index">

                    <td ng-click="showLoaderAt(rowIndex, 0)">
                      <span ng-show="cellLoaders[rowIndex][0]">**loading**</span>
                      {{::line.gameDateMonth}}
                    </td>

                    <td ng-click="showLoaderAt(rowIndex, 1)">
                      <span ng-show="cellLoaders[rowIndex][1]">**loading**</span>
                      <span>{{::row.nss}}</span>
                    </td>

                    <td ng-click="showLoaderAt(rowIndex, 2)">
                      <span ng-show="cellLoaders[rowIndex][2]">**loading**</span>
                      <span>{{::row.name}}</span>
                    </td>

                    <td ng-click="showLoaderAt(rowIndex, 3)">
                      <span ng-show="cellLoaders[rowIndex][3]">**loading**</span>
                      <a>
                        <span ng-hide="row.noSpread">{{::row.spread.spread}} ({{::row.spread.moneyLine}})</span>
                      </a>
                      <a href="javascript:void(0);" ng-show="row.spreadAvailable"
                         ng-click="addLineToBetSlip(line, row, 'spread')">
                        <span ng-hide="row.noSpread">{{::row.spread.spread}}</span>
                      </a>
                    </td>

                    <td ng-click="showLoaderAt(rowIndex, 4)">
                      <span ng-show="cellLoaders[rowIndex][4]">**loading**</span>
                      <a>
                        <span>{{::row.total.type}}</span>
                      </a>
                      <a ng-click="addLineToBetSlip(line, row, 'total')">
                        <span>{{::row.total.type}}</span>
                      </a>
                    </td>

                    <!-- </td> -->
                  </tr>
                </tbody>

              </table>

              <pre>{{showCoords}}</pre>
              <hr>
              <pre>{{cellLoaders}}</pre>

            </div>

          </div>

        </div>

      </div>

    </div>

</body>

</html>