2017-09-04 119 views
1

我有一個ngTable,加載了從「Get」調用進入webapi的數據。然後我重新加載表格,但沒有顯示數據。AngularJS ngtable不能正確顯示數據

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

這是我的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> 

$數據沒有任何數據,但如果我嘗試{{dataTable的}}我已經正確加載了所有數據。任何人都可以幫我解決這個問題嗎?也許有些東西顯而易見,但我的意思是,表格無論如何都是創建行和列的數量,但它是空的,這很奇怪。

+0

你在哪裏存儲$數據的值,因爲我沒有看到任何數據存儲在該變量中。我想你正在將數據存儲在控制器中的teamList變量中。所以請嘗試在teamList –

+0

@ParthGoswami中使用ng-repeat = team如果我這樣做了,那麼過濾器就會工作? – dayanrr91

回答

0

經過長時間的搜索,我發現問題很簡單,就是關於CamelCase符號。問題是當你從web api發送信息時,如果你沒有爲這些參數設置自定義符號,它們將以大寫的第一個字母發送。 所以,我們在這裏有兩個選擇,創建自定義符號或者僅僅用在我們的HTML大寫的第一個字母。我希望這將有助於未來的人!

0

我認爲你沒有在任何地方存儲數據。我無法在您的js文件中找到$ scope.data。

+0

在我看到的ngTable的所有示例中,它們不直接分配,getData應該足夠。 Actullay我在一個有角度的mvc項目中完成了它,並且工作得很好。在這裏,我已經分離了網頁api和角度,我一直只有角度幾個月,所以也許有一些明顯的我失蹤了。 – dayanrr91