2017-09-04 1 views
1

webapi에 대한 "Get"호출에서 진행되는 데이터가로드 된 ngTable이 있습니다. 그런 다음 테이블을 다시로드하지만 데이터는 표시되지 않습니다.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> 

$의 데이터가 어떤 데이터가 없습니다, 그러나 나는 시도하는 경우 {{데이터 테이블}} 모든 데이터가 정확하게로드되었습니다. 아무도 이걸로 나를 도울 수 있을까?, 어쩌면 뭔가 실종되었다는 것이 분명하지만, 요점은 테이블이 행과 열의 양을 어쨌든 만들지 만 비어 있다는 것입니다. 매우 이상합니다.

+0

여기서 변수에 저장된 데이터가 없기 때문에 값을 $ data에 저장하고 있습니다. 컨트롤러의 teamList 변수에 데이터를 저장하고있는 것 같습니다. 그래서 team-list에서 ng-repeat = team을 사용해보십시오. –

+0

@ParthGoswami 제가 그렇게한다면, 필터가 작동할까요? – dayanrr91

답변

0

오랫동안 검색 한 후에 CamelCase 표기법에 관한 문제가 매우 간단하다는 것을 알았습니다. 문제는 웹 API에서 정보를 보낼 때 매개 변수에 대한 사용자 지정 표기법을 설정하지 않으면 대문자로 된 첫 번째 문자와 함께 전송됩니다. 그래서 두 가지를 선택합니다. 맞춤 표기법을 사용하거나 HTML에서 대문자로 된 첫 번째 문자를 사용합니다. 앞으로 이것이 도움이되기를 바랍니다.

0

나는 어디에도 $ 데이터를 저장하지 않는다고 생각합니다. js 파일에서 $ scope.data를 찾을 수 없습니다.

+0

ngTable에서 보았던 모든 예제에서 getData는 직접 할당하지 않았으므로 충분해야합니다. Actullay 나는 각도와 함께 mvc 프로젝트에서 그것을했고 매우 잘 움직였다. 여기에서는 웹 API와 앵귤러를 분리했습니다. 몇 달 동안 만 각도가 있었기 때문에 내가 놓친 부분이있을 수 있습니다. – dayanrr91

관련 문제