AngularJS ngtable n'affiche pas correctement les données

Question

J'ai un ngTable qui est chargé avec des données qui proviennent d'un appel "Get" à un webapi. Ensuite, je recharge la table, mais les données ne sont pas affichées.

Ceci est le fichier * .js

rdapp.controller('scoringTableCtrl', ['$location', '$scope', '$http', 'ngTableParams', '$filter', 
function($location, $scope, $http, ngTableParams, $filter) { 
    $scope.teamList = []; 
    $http({ 
     method: 'GET', 
     url: 'http://localhost:34592/api/scoringTable', 
     headers: { 
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 
     } 
    }).then(function(success) { 
     $scope.teamList = success.data; 
     addFieldsForSorting(); 
     $scope.dataTable.reload(); 
    }, function(error) { 
     console.log(error); 
    }); 
    $scope.resolveHTML = function(position) { 
     if (position == 1 || position == 2 || position == 3) return 'champions'; 
     if (position == 4) return 'champions-prev'; 
     if (position == 5 || position == 6) return 'europa-league'; 
     if (position == 18 || position == 19 || position == 20) return 'decline'; 
     return ''; 
    } 

    function addFieldsForSorting() { 
     // Add named properties for every stat value in recipients array, used for sorting the grid. 
     // Take value from vitalStats array, use alertIds to match between alpha keys and numeric keys. 
     $scope.teamList.forEach(function(team) { 
      for (var property in team) { 
       if (!team.hasOwnProperty(property)) { 
        continue; 
       } 
       if (property == 'name') { 
        continue; 
       } 
       if (property == 'position') { 
        continue; 
       } 
       var prop = 'sort_' + property; 
       team[prop] = -(team[property]); 
      } 
      team['sort_name'] = team.name; 
      team['sort_position'] = team.position; 
     }); 
    } 
    $scope.dataTable = new ngTableParams({ 
     page: 1, // show first page 
     count: 20, // count per page 
     sorting: { 
      sort_position: 'asc' // initial sorting 
     } 
    }, { 
     counts: [], 
     total: $scope.teamList.length, // length of data 
     getData: function($defer, params) { 
      // use build-in angular filter 
      var requestData = $scope.teamList; 
      var orderedData = params.sorting() ? $filter('orderBy')(requestData, params.orderBy()) : requestData; 
      params.total(orderedData.length); // set total for recalc pagination 
      $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
     } 
    }); 
} 
]); 

Ceci est mon html:

<div class="position-view" style="position:relative; top:100px;"> 
<table ng-table="dataTable" class="table table-bordered table-border-important" ng-class="rec_spinner"> 
    <tbody class="text-center">{{$data.length}} 
     <tr ng-repeat="team in $data"> 
      <td class="{{resolveHTML(team.position)}}" data-title="''" sortable="'sort_position'"> 
       {{team.position}} 
      </td> 
      <td data-title="'Clasificación'" sortable="'sort_name'"> 
       {{team.name}} 
      </td> 

      <!--Total Stats--> 
      <td data-title="'PJ'" sortable="'sort_pj'"> 
       {{team.pj}} 
      </td> 
      <td data-title="'PG'" sortable="'sort_pg'" > 
       {{team.pg}} 
      </td> 
      <td data-title="'PE'" sortable="'sort_pe'" > 
       {{team.pe}} 
      </td> 
      <td data-title="'PP'" sortable="'sort_pp'" > 
       {{team.pp}} 
      </td> 
      <td data-title="'GF'" sortable="'sort_gf'"> 
       {{team.gf}} 
      </td> 
      <td data-title="'GC'" sortable="'sort_gc'"> 
       {{team.gc}} 
      </td> 
      <td data-title="'PT'" sortable="'sort_pt'"> 
       {{team.pt}} 
      </td> 


     </tr> 
    </tbody> 
</table> 

$ data n'a pas de données, mais si je tente {{dataTable}} J'ai toutes les données correctement chargées. Quelqu'un peut-il m'aider avec cela ?, peut-être il ya quelque chose d'évident que je suis manquant, mais le point est que la table crée la quantité de lignes et de colonnes de toute façon mais vide, c'est très étrange.

Answer 1

Après une longue recherche j'ai compris que le problème était assez facile, était à propos de la notation CamelCase. Le problème est lorsque vous envoyez des informations à partir d'une API Web, si vous ne définissez pas de notation personnalisée pour les paramètres, ils seront envoyés avec la première lettre en majuscule. Donc, nous avons deux choix ici, établir une notation personnalisée ou simplement utiliser dans notre HTML la première lettre en majuscule. J'espère que cela aidera quelqu'un dans le futur!

Answer 2

Je pense que vous ne stockez pas de données $ partout. Je ne trouve pas $ scope.data dans votre fichier js.