J'ai un tableau dans lequel j'affiche un chargeur chaque fois que vous interagissez avec un élément du tableau. Le problème que j'ai, c'est que si vous avez 7 éléments sur ce tableau, vous verrez le chargeur sur chaque élément, et je ne veux pas cela, je dois afficher le chargeur uniquement dans l'élément [index] avec lequel vous interagissez avec

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

    });
  });
}

Modèle

<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>
0
Non 15 juil. 2015 à 00:11

2 réponses

Meilleure réponse

Si j'ai bien compris, vous voulez qu'un chargeur apparaisse dans tout ce sur quoi l'utilisateur clique. Si tel est le cas, il semble que vous deviez créer un modèle pour chaque cellule qui peut être basculé sur vrai ou faux si l'utilisateur clique dessus.

En y réfléchissant, vous pourriez probablement retravailler cela avec une sorte d'arrangement de directives imbriquées, mais si c'est ce que vous visez, la mise en œuvre suivante devrait vous donner un point de départ décent. J'espère que ça aide.

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>
1
Matt Herbstritt 14 juil. 2015 à 23:42

J'ai fait une directive et utilisé pour chaque élément et chaque serveur d'appel. Si vous avez besoin d'une interaction Ajax.

Injectez un contrôleur avec des services dans la directive.

-1
arterzatij 14 juil. 2015 à 21:18