2017-09-04 21 views
1

webaiへの "Get"コールのデータがロードされるngTableがあります。次に、テーブルをリロードしますが、データは表示されません。AngularJS ngtableでデータが正しく表示されない

これは、* .jsファイルは、これは私のhtmlです

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())); 
     } 
    }); 
} 
]); 

ファイルです:

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

$データはありません任意のデータを持っているが、私は{{のdataTable}}しようとした場合私はすべてのデータが正しく読み込まれている。誰かがこれで私を助けることができますか?多分、私が行方不明になっていることが明らかになっていますが、テーブルは行と列の量を空で作成していますが、それは非常に奇妙です。

+0

ここでは、変数にデータが格納されていないため、$ dataに値を格納しています。私はあなたのデータをコントローラのteamList変数に保存していると思います。だから、チームリストのng-repeat = teamを使ってみてください –

+0

@ ParthGoswami私がそれを行うと、フィルタが動作するでしょうか? – dayanrr91

答えて

0

私が長い間検索した後、私はCamelCaseの記法については問題がかなり簡単だと分かりました。問題は、Web APIから情報を送信するときです。パラメータのカスタム表記法を設定しないと、大文字の最初の文字で送信されます。 ここで2つの選択肢があります。カスタム表記法を確立するか、HTMLで大文字にした最初の文字を使用します。私はこれが将来誰かを助けることを願っています!

0

どこにでも$データを保存していないと思います。あなたのjsファイルに$ scope.dataが見つかりません。

+0

私がngTableのために見たすべての例では、getDataを使って直接割り当てることはできません。 Actullay私は角度のあるmvcプロジェクトでそれを行い、非常にうまくいった。ここでは、Web APIと角を分けて、数ヶ月間角張っているだけなので、私が紛失していることが分かります。 – dayanrr91

関連する問題