在数组

Question

我有一个数组，每当你与阵列上的任何项目交互时我都会显示一个加载器。我遇到的问题是，如果你在该数组上有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>

Answer 1

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

考虑到这一点你可能会通过某种嵌套指令安排来改变它，但如果这是你的目标，那么下面的实现应该给你一个不错的起点。希望它有所帮助。

DEMO

<强> app.js

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


});

<强>的index.html

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

Answer 2

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

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