Почему я не могу отображать записи с помощью ngTable

Question

Я пытался отображать записи на html с помощью ngTable. Записи извлекаются со стороны сервера через rest api.

HTML:

<div class="container"> 
     <table ng-table="tableParams" class="table" show-filter="false"> 
      <tr ng-repeat="report in $data"> 
       <td title="'ReportId'" filter="{ reportid: 'text'}" sortable="'reportid'"> 
        {{report.reportid}}</td> 
       <td title="'SampleId'" filter="{ sampleid: 'text'}" sortable="'sampleid'"> 
        {{report.sampleid}}</td> 
       <td title="'MRN'" filter="{ mrn: 'text'}" sortable="'mrn'"> 
        {{report.mrn}}</td> 
       <td title="'Diagnosis'" filter="{ diagnosis: 'text'}" sortable="'diagnosis'"> 
        {{report.diagnosis}}</td> 
      </tr> 
     </table> 
    </div> 

Controller.js

ristoreApp.controller("fmCtrl", 
    ['$scope', 'fmFactory', 'NgTableParams', function($scope, fmFactory, NgTableParams) { 
     $scope.selection = '0'; 
     $scope.fmSearch = function() { 
      if ($scope.selection == '0') { 
       $scope.tableParams = new NgTableParams({ 
        page: 1,   // show first page 
        count: 10   // count per page 
       }, { 
        getData: function (params) { 
         return fmFactory.getAll().then(function(data) { 
          params.total(data.inlineCount); 
          return data.results; 
         }); 
        } 
       }); 
       $scope.tableParams.reload(); 
      } 
     } 
    }] 
) 

завод JS

ristoreApp.factory("fmFactory", ['$http', '$window', 
    function ($http, $window) { 
     var service = {}; 

     service.getAll = function() { 
      var url = SERVER + "/ristore/foundation/"; 
      return $http({ 
       headers: {'Authorization': 'Bearer ' + $window.localStorage.getItem("access_token")}, 
       url: url, 
       method: 'GET', 
       crossOrigin: true 
      }) 
     } 

     return service; 
    }]); 

Завод определенно возвращает записи с сервера правильно, потому что когда я его отладки, это показывает, данные ответа.

Однако он ничего не показывает на странице. Что пошло не так?

Answer 1

ли эти вещи

1. Изменение контроллера $scope.tableParams к this.tableParams
2. Изменение <div ng-controller="fmCtrl"> в целях <div ng-controller="fmCtrl as fm">
3. Изменение ng-table="tableParams" в целях ng-table="fm.tableParams"

Документация: http://ng-table.com/#/loading/demo-external-array

Update 1: Изменение return rmFactory.getAll() как это,

return fmFactory.getAll().then(function(response) { 
    var reports = response.data; 
    params.total(reports.length); 
    return reports; 
}); 

Update 2: Добавьте эту строку в контроллер начало (первая линия)

var self = this; 

Первое изменение, которое мы сделали, переписать его вот так.

self.tableParams 

Update 3: Мы удалили $scope и использовали this, поскольку документация с помощью этого. this не работает здесь т.к., мы были внутри $scope.fmSearch. Итак, чтобы получить это от контроллера, мы сохранили его в переменной self и получили к ней доступ. Вы можете переименовать self в любое имя по вашему выбору.