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

Прикрепленная ссылка на плункер содержит код для этого:


pagination angularjs ngtable
person Prateek    schedule 11.07.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы просто пропустили $ в ng-repeater, должно быть logdetail in $data вместо 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>
person sylwester    schedule 11.07.2014
comment
О, теперь я понял, ng-table всегда возвращает $data, и я пытался использовать имя переменной области видимости для итерации. Спасибо :) - person Prateek; 11.07.2014