为什么我不能用 ngTable 显示记录

Question

我试图使用 ngTable 在 html 上显示记录。记录是通过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

更新1：像这样更改return rmFactory.getAll()，

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

更新 2：将此行添加到控制器开头（第一行）

var self = this;

我们做的第一个改动，改写成这样。

self.tableParams

更新 3：我们删除了 $scope 并使用了 this，因为文档正在使用它。 this 在这里不起作用，因为我们在 $scope.fmSearch 里面。所以为了得到控制器的这个，我们将它存储在一个变量self 中并访问它。您可以将 self 重命名为您选择的任何名称。