2014-07-11 3 views
1

ng-table을 사용하여 페이지 매김을 시도하고 있습니다. 모든 데이터를 페이지 매기기가 아닌 단일 페이지로 표시합니다. 오류를주지 않고 페이지 번호를 표시하지만 내용의 페이지 매김이 이루어지지 않습니다.ng-table은 페이지 번호 매기기를하지 않습니다. 페이지 번호 만 표시합니다.

<body ng-app="AngularApp"> 
<table class="table table-bordered table-striped table-hover" id="log_table" ng-controller="ControllerCtrl" ng-table="tableParams"> 
    <tr ng-repeat="logDetail in data"> 
     <td>{{logDetail._source.log_datetime[0]}}</td> 
     <td>{{logDetail._source.event_src_correlation[0]}}</td> 
     <td>{{logDetail._source.content_subType[0]}}</td> 
    </tr> 
</table> 
</body> 

angular.module('AngularApp',['ngTable']) 
    .controller('ControllerCtrl', function ($scope,$q, ngTableParams) { 
    $scope.data=[{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-22T17:17:56.689"],"event_src_correlation":[1]},"sort":[1]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-22T19:48:20.459"],"event_src_correlation":[1]},"sort":[2]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-22T19:49:00.981"],"event_src_correlation":[1]},"sort":[3]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.762"],"event_src_correlation":[1]},"sort":[4]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.763"],"event_src_correlation":[1]},"sort":[5]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.768"],"event_src_correlation":[1]},"sort":[6]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.770"],"event_src_correlation":[1]},"sort":[7]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:51.784"],"event_src_correlation":[1]},"sort":[8]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:33:59.943"],"event_src_correlation":[1]},"sort":[9]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-24T20:34:00.360"],"event_src_correlation":[1]},"sort":[10]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.149"],"event_src_correlation":[1]},"sort":[11]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.150"],"event_src_correlation":[1]},"sort":[12]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.151"],"event_src_correlation":[1]},"sort":[13]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.152"],"event_src_correlation":[1]},"sort":[14]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:08.165"],"event_src_correlation":[1]},"sort":[15]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:36.586"],"event_src_correlation":[1]},"sort":[16]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:18:36.965"],"event_src_correlation":[1]},"sort":[17]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.467"],"event_src_correlation":[1]},"sort":[18]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.468"],"event_src_correlation":[1]},"sort":[19]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.468"],"event_src_correlation":[1]},"sort":[20]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.469"],"event_src_correlation":[1]},"sort":[21]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:05.476"],"event_src_correlation":[1]},"sort":[22]},{"_source":{"content_subType":["tomcatLog"],"log_datetime":["2014-02-26T13:19:35.917"],"event_src_correlation":[1]},"sort":[23]}]; 
    $scope.tableParams = new ngTableParams({ 
      page: 1,   // show first page 
      count: 10   // count per page 
     }, { 
      total: $scope.data.length, // length of data 
      getData: function($defer, params) { 
       $defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
      } 
     });  
    }); 

첨부 plunker 링크는 코드를 포함 http://plnkr.co/edit/kWVNDXG0RlPAqX5lkwhS?p=preview

답변

4

당신은 바로 지금 ... logdetail in data

http://plnkr.co/edit/5etPezh3iCHRpYnzllw1?p=preview

<table class="table table-bordered table-striped table-hover" id="log_table" ng-table="tableParams"> 
    <tr ng-repeat="logDetail in $data"> 
    <td>{{logDetail._source.log_datetime[0]}}</td> 
    <td>{{logDetail._source.event_src_correlation[0]}}</td> 
    <td>{{logDetail._source.content_subType[0]}}</td> 
    </tr> 
</table> 
+0

오의 logdetail in $data instad해야 NG-중계기에서 $를 그리워 I 알았어, ng-table은 항상 $ data를 반환하고 나는 반복을 위해 범위 변수 이름을 사용하려고했다. 감사 :) – Prateek