2017-09-04 118 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