背景
我正在努力使用ngTable的优点。我仔细阅读了ngTable ajax demo并尝试尽可能合理地遵循该示例；但是，我需要偏离ngTable ajax demo定义与Controller内联的ngResource的部分。
问题
我使用ngTable成功构建了一个ngTable filters；我的Web应用程序是 here (另请参见 plunker )。这是一个ngTable，其中:
json REST service正确加载，并且过滤器起作用。但是，我的问题是，在我在“过滤器”字段中键入内容之前，该表是空白的(请参见下面的before和after屏幕截图)。
我尝试过的所有浏览器都存在该问题:
我知道该Webapp在Internet Exploder 9中已损坏...我不知道为什么，但是我真的不在乎IE；该Web应用程序将不会成为公共(public)Web服务。
问题
注意:源代码在页面底部...我为此构建了一个 plunker 。
结束注释
注意1 敏锐的读者可能会注意到，我以AngularJS形式而不是默认的花括号分隔符使用了
[[和]]。我这样做是因为我正在使用Flask和Jinja(模板引擎也需要双花括号)。屏幕截图
之前:加载页面时该页面为空白:
之后:但是，如果我在过滤器中键入任何字符，ngTable将显示数据:
更新:明确的问题解决方案，多亏了lib3d的回答
<script type="text/javascript">
"use strict";
// Set up an ngResource service to make HTTP GET / POST / DELETE calls
var Api = angular.module("api_main", ["ngResource"]);
Api.factory("restDemo", function ($resource) {
// http://www.masnun.com/2013/08/28/rest-access-in-angularjs-using-ngresource.html
return $resource("http://demo.pennington.net/demo/api/v1/data01", {}, {});
});
// Loosely based on this ngTable demo...
// http://bazalt-cms.com/ng-table/example/6
var App2 = angular.module('taskTable', ['ngRoute', 'api_main',
'ngTable']);
// Need to change AngularJS symbols when using flask + Jinja
App2.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
App2.controller('tableCntl', function($scope, $filter, restDemo, ngTableParams) {
var data = restDemo.query(); // HTTP GET for REST service
// Set up task table parameters
/* Lib3d's fix (i.e. data.$promise) is below */
data.$promise.then(function (data) {
/* the data is here, work with it */
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
total: data.length,
sorting: {
Column01: 'asc',
Column02: 'asc',
Column03: 'asc'
},
filter: {
Column01: "",
Column02: "",
Column03: "",
}
}, {
getData: function($defer, params) {
// Filtering
var orderedData = params.filter() ?
$filter('filter')(data, params.filter()) :
data;
// Sorting
orderedData = params.sorting() ?
$filter('orderBy')(orderedData, params.orderBy()) :
orderedData;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
/* set total for recalc pagination */
params.total(orderedData.length);
// This shouldn't be required, but keeping here in case
//if(!$scope.$$phase) {
// $scope.$apply();
//}
}
});
});
});
</script>
splinter 的演示源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.ngtable/0.3.1/ng-table.css">
<!--
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding-top: 30px; /* 30px pad at the top of screen */
}
</style>
<!-- Fix up title -->
<title>DATA DEMO</title>
</head>
<body>
<div class="pure-g">
</div>
<!-- Static navbar -->
<div class="pure-g">
<div id="menu" class="pure-u">
<div class="pure-menu pure-menu-horizontal pure-menu-open">
<ul>
<li><a href="#">Add Demo</a></li>
<li class="active"><a href="#">List Demo</a></li>
<li><a href="#">List Projects</a></li>
<li>
<a href="/login">Login</a>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!--- insert stuff here -->
<div id="Tasks" ng-app="taskTable" ng-controller="tableCntl">
<p><strong>Filter:</strong> [[tableParams.filter()|json]]
<table ng-table="tableParams" show-filter="true" class="table">
<tbody>
<tr ng-repeat="words in $data">
<td data-title="'Column01'" sortable="Column01" filter="{'Column01': 'text'}">
[[words.Column01]]
</td>
<td data-title="'Column02'" sortable="Column02" filter="{'Column02': 'text'}">
[[words.Column02]]
</td>
<td data-title="'Column03'" sortable="Column03" filter="{'Column03': 'text'}">
[[words.Column03]]
</td>
</tr>
</tbody>
</table>
</div>
</body>
<!-- insert JS at the bottom of the page -->
<footer>
<!-- all flash messages are processed here -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-resource.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/angular.ngtable/0.3.1/ng-table.js"></script>
<!--
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
-->
<script type="text/javascript">
"use strict";
// Set up an ngResource service to make HTTP GET / POST / DELETE calls
var Api = angular.module("api_main", ["ngResource"]);
Api.factory("restDemo", function ($resource) {
// http://www.masnun.com/2013/08/28/rest-access-in-angularjs-using-ngresource.html
return $resource("http://demo.pennington.net/demo/api/v1/data01", {}, {});
});
// Loosely based on this ngTable demo...
// http://bazalt-cms.com/ng-table/example/6
var App2 = angular.module('taskTable', ['ngRoute', 'api_main',
'ngTable']);
// Need to change AngularJS symbols when using flask + Jinja
App2.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
App2.controller('tableCntl', function($scope, $filter, restDemo, ngTableParams) {
var data = restDemo.query(); // HTTP GET for REST service
// Set up task table parameters
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
total: data.length,
sorting: {
Column01: 'asc',
Column02: 'asc',
Column03: 'asc'
},
filter: {
Column01: "",
Column02: "",
Column03: "",
}
}, {
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.filter() ?
$filter('filter')(data, params.filter()) :
data;
//sorting
orderedData = params.sorting() ?
$filter('orderBy')(orderedData, params.orderBy()) :
orderedData;
// store filtered data as $scope.words
$scope.words = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve($scope.words);
$defer.resolve(data.result);
}
});
});
</script>
<!-- Custom footer content here -->
</footer>
</html>
数据(回答问题后，我将删除演示json REST service):
[{"Column02": "shines", "Column03": "paycheck", "Column01": "days"},
{"Column02": "erg", "Column03": "gag", "Column01": "emotion's"},
{"Column02": "Chris", "Column03": "Poznan's", "Column01": "treasure's"},
{"Column02": "presentiments", "Column03": "Austerlitz's", "Column01": "suppression's"},
{"Column02": "leopards", "Column03": "slosh's", "Column01": "upturned"},
{"Column02": "uncaring", "Column03": "cosmetics", "Column01": "symmetry"},
{"Column02": "guesser's", "Column03": "lapped", "Column01": "retrogressed"},
{"Column02": "Kurd", "Column03": "wryest", "Column01": "cicadas"},
{"Column02": "cantered", "Column03": "encrustation's", "Column01": "beyond"},
{"Column02": "flybys", "Column03": "poesying", "Column01": "physician's"},
{"Column02": "fun", "Column03": "Delaware's", "Column01": "destructiveness"},
{"Column02": "scramblers", "Column03": "gestates", "Column01": "acoustics"},
{"Column02": "redesigning", "Column03": "cubits", "Column01": "Enterprise"},
{"Column02": "phonograph's", "Column03": "haloed", "Column01": "upsurge"},
{"Column02": "Michelson", "Column03": "Pansy", "Column01": "McCoys"},
{"Column02": "adieu", "Column03": "Dido", "Column01": "ligaturing"},
{"Column02": "osprey's", "Column03": "expressiveness's", "Column01": "Starr"},
{"Column02": "patent's", "Column03": "therapeutically", "Column01": "brasher"},
{"Column02": "enfranchise", "Column03": "idolized", "Column01": "criticized"},
{"Column02": "Angel", "Column03": "wryest", "Column01": "drum"},
{"Column02": "overstaying", "Column03": "tranquillized", "Column01": "alacrity"},
{"Column02": "underachievers", "Column03": "minority", "Column01": "Brigham's"},
{"Column02": "lobotomy's", "Column03": "filament's", "Column01": "scoldings"},
{"Column02": "original", "Column03": "muskmelon's", "Column01": "financially"},
{"Column02": "flagon's", "Column03": "vapidness", "Column01": "Klaus's"},
{"Column02": "dhotis", "Column03": "fleeter", "Column01": "jugulars"},
{"Column02": "shanty", "Column03": "profiteer's", "Column01": "disbelief"},
{"Column02": "bureaucracies", "Column03": "flashier", "Column01": "refrigerating"},
{"Column02": "betrayal's", "Column03": "hindquarters", "Column01": "faze"},
{"Column02": "Poland", "Column03": "cobbler", "Column01": "kidnaped"}]
我正在使用...
我已经尝试过的
这些事情似乎都没有对问题产生影响:
null而不是我的过滤器中的空字符串，作为suggested by Sander Elias 如果我将json数据内联到
<script>块中而不是进行ajax json REST service调用，则在页面加载时表将正确填充，但这实际上无济于事，因为数据会不时更改。 最佳答案
您的data是异步获取的，但是您可以同步使用它。然后，第一个getData调用使用未解析的数据，这意味着根本没有数据。
键入一个字符似乎可以解决getData，从而回想data。那将解释在键入的第一个键上显示的数据。
为了等待数据被获取，在这样的回调中实现ngTable调用:
/* there, data are not fetched */
data.$promise.then(function (data) {
/* there data are fetched, work with it */
});