为什么我不能用 ngTable 显示记录
Why can't I display records with ngTable
我试图使用 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;
}]);
工厂肯定returns从服务器记录正确,因为当我调试它时,它显示了响应的数据。
但是它没有在页面上显示任何内容。出了什么问题?
做这些事情
- 将控制器中的
$scope.tableParams
更改为this.tableParams
- 将
<div ng-controller="fmCtrl">
更改为<div ng-controller="fmCtrl as fm">
- 将
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
重命名为您选择的任何名称。
我试图使用 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;
}]);
工厂肯定returns从服务器记录正确,因为当我调试它时,它显示了响应的数据。
但是它没有在页面上显示任何内容。出了什么问题?
做这些事情
- 将控制器中的
更改为$scope.tableParams
this.tableParams
- 将
更改为<div ng-controller="fmCtrl">
<div ng-controller="fmCtrl as fm">
- 将
更改为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
重命名为您选择的任何名称。