我正在尝试使用ngTable构建一个表，但使用的自定义过滤方式与the example from the ngTable page中描述的不同。
我想要过滤，但我不希望ngTable呈现过滤器选择器。我想自己渲染它们（在表格上方），然后在我的“getData（）”方法中引用它们。
前面提到的例子没有解释任何一种机制的运作方式。我不知道在每个“td”元素的“filter”属性中确切需要指定什么。我理解AngularJS $ filter函数的基本语法，但我不清楚ngTable在做什么。从一个例子看，我看起来只能进行“等于”检查，这只会选择相关列值等于过滤值的行。这不是我需要的。
我的表有几列。其中两个被称为“key”和“failed”，分别是string和boolean。当我在表格上方渲染这些过滤字段时，我需要为“失败”过滤器设置自定义标签。过滤“key”列应该将过滤器值与“key”值的任何子字符串匹配。例如，如果我的键值为“abc”，“abac”和“def”，则过滤值“a”将导致前两个条目显示，而不显示“def”条目。
更新
与此相关，我希望我能弄清楚如何做这样的事情：
假设我的表元素中有一个ngRepeat表达式，使用“标准”angularjs过滤器：
"item in $data | customfilter:param | anothercustomfilter:param"
我们知道这不太有效，因为这些过滤器仅适用于从“getData（）”方法获得的一个页面切片。我真正希望能够在我的“getData（）”方法中做的只是访问整个过滤器链，包括参数表达式，并简单地将一个不同的数组传递给它，作为整个原始数据列表，而不仅仅是页面切片。
与此同时，我需要能够通过在正常处理中执行该过滤器链来“关闭”过滤angularjs自己做的事情。
这听起来很难，但我发现当前的API需要在html和javascript之间进行大量耦合。如果html可以指定所需的过滤，并且javascript只使用整个过滤器链，但是在整个数据列表上使用它，而不仅仅是页面切片，那就太好了。
更新
以下是我的HTML的相关摘录：
<label for="keysFilter">Filter Keys:</label>
<input id="keysFilter" type="text" ng-model="keysFilter"/>
<label for="showOnlyFailed">Show only queries that failed?</label>
<input id="showOnlyFailed" type="checkbox" ng-model="showOnlyFailed"/>
<table ng-table="tableParams" table-pagination="custom/pages" class="table">
<tr ng-repeat="queryInfo in $data"> <!-- | filterFailed:showOnlyFailed | filterMatchingKeys:keysFilter -->
这是我的tableParams代码：
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
sorting: {
lastRun: 'desc'
}
},
{
debugMode: true,
total: $scope.completedQueries.length,
getData: function($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')($scope.completedQueries, params.orderBy()) :
data;
orderedData = $filter('filterFailed')(orderedData, $scope.showOnlyFailed);
orderedData = $filter('filterMatchingKeys')(orderedData, $scope.keysFilter);
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(),
params.page() * params.count()));
}
});
请注意，我使用过这个ngTable不使用“$ data”列表，只是遍历我的“completedQueries”列表。当它像这样工作时，当我点击“仅显示失败的查询”复选框或在“keysFilter”输入字段中输入文本时，列表会立即更改。
但是，现在我正在使用“$ data”列表，当我更改其中任何一个字段时没有任何反应。事实上，我甚至为这两个领域添加了$ watch-es，而且他们都没有开火。但是，当我对其中任何一个字段进行更改时，我知道正在重新评估表数据，因为其中两列的数据预计为毫秒值，并且我在这些列上有一个自定义过滤器，用于将值转换为一个“很久以前”的英语表达，比如“30秒前”或“2分钟前”，每当我更改其中一个输入字段时，我看到表中的那些表达式发生了变化，但它仍然没有适当的过滤。
如果重要，这里是我添加到我的范围的$ watch-es。这些从未出现过：
$scope.$watch("showOnlyFailed", function() {
$scope.tableParams.reload();
});
$scope.$watch("keysFilter", function() {
$scope.tableParams.reload();
});
请注意，当我注释这些时，我在点击“getData（）”方法后会看到以下错误：
Error: settings.$scope is null @http://localhost:8000/js/diag/libs/ng-table.src.js:411 qFactory/defer/deferred.promise.then/wrappedCallback@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:11046 qFactory/ref/<.then/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:11132 Scope.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:12075 Scope.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:11903 Scope.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:12179 bootstrap/doBootstrap/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1341 invoke@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:3762 bootstrap/doBootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1340 bootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1353 angularInit@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1301 @http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:21048 n.Callbacks/j@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 n.Callbacks/k.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 .ready@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 K@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js Line 9509
这是相关的代码块：
$defer.promise.then(function (data) {
settings.$loading = false;
log('ngTable: current scope', settings.$scope);
if (settings.groupBy) {
self.data = settings.$scope.$groups = data;
} else {
self.data = settings.$scope.$data = data; // line 411
}
settings.$scope.pages = self.generatePagesArray(self.page(), self.total(), self.count());
});
更新
以下是我的plunkr，它表明更改外部过滤器字段不起作用。我还有两个$ watch-es评论出来试图纠正这个问题。当我评论这些时，我在ng-table中得到一个错误，抱怨空范围。
更新
我尝试将“newvalue，oldvalue”参数添加到我的$ watch-es（我更新了plunkr）。现在，对字段的更改会导致表更新。不幸的是，我仍然在ng-table的第411行获得了堆栈跟踪。
答案 0 :(得分：8)
您不需要手表，也不需要您创建的自定义过滤器。实际上，角度的'过滤器'过滤器非常强大。
您只需创建一个对象，通过与您的项目字段匹配的成员来跟踪您的过滤器值。这样的事情。
$scope.filter = {
key: undefined,
failed: undefined
}
然后您可以使用getData将其恢复到params.filter()回调中。
我已更新了您的plunker here。您还可以查看以下示例：
var app = angular.module('main', ['ngTable']);
app.controller('MainCtrl', function($scope, $http, $filter, ngTableParams) {
$scope.completedQueries = [{"key":"abc000","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc001","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc002","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc003","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc004","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc005","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc006","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc007","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc008","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc009","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc010","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc011","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc012","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc013","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc014","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc015","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc016","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc017","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false}];
$scope.filter = {
key: undefined,
failed: undefined
};
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
filter: $scope.filter
}, {
debugMode: true,
total: $scope.completedQueries.length,
getData: function($defer, params) {
var orderedData = params.sorting() ? $filter('orderBy')($scope.completedQueries, params.orderBy()) : data;
orderedData = $filter('filter')(orderedData, params.filter());
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<div ng-app="main" ng-controller="MainCtrl">
<label for="keysFilter">Filter Keys:</label>
<input id="keysFilter" type="text" ng-model="filter.key"/>
<label for="showOnlyFailed">Show only queries that failed?</label>
<input id="showOnlyFailed" type="checkbox" ng-model="filter.failed"/>
<br/>
<table ng-table="tableParams" class="table">
<tr ng-repeat="queryInfo in $data">
<td data-title="'Key'" sortable="'key'">{{queryInfo.key}}</td>
<td data-title="'Last Run'" sortable="'lastRun'">{{queryInfo.lastRun}}</td>
<td data-title="'Last Successful Run'" sortable="'lastSuccessfulRun'">{{queryInfo.lastSuccessfulRun}}</td>
<td data-title="'Elapsed Time'" sortable="'elapsedTime'">{{queryInfo.elapsedTime}} ms</td>
<td data-title="'Rows'" sortable="'rows'">{{queryInfo.rows}}</td>
<td data-title="'Failed'" sortable="'failed'">{{queryInfo.failed}}</td>
<td data-title="''"><button class="btn">Detail</button></td>
</tr>
</table>
<div>
答案 1 :(得分：4)
您似乎遇到了ng-table本身的问题，这是第三方图书馆并没有得到很好的支持。
作为证据，请查看他们的Github页面，其中有超过200个公开问题和1,200颗星（1：6）：
https://github.com/esvit/ng-table
将此与D3.js等图书馆进行比较，该图书馆享有纽约时报的全部技术和财务支持。它有150个问题，超过 30,000 星（1：200）。
https://github.com/mbostock/d3
大量未解决的问题意味着人们发现错误的速度比开发人员解决错误的速度快。很可能，开发人员可能已经转向新项目，并且不再对维护这个库感兴趣。
换句话说，您已经遇到了库本身的功能限制。发生这种情况时，您有两个选择，
可悲的是我已经调查了这个并且现在没有一个非常好的角度表库
所以这不是一个完全无赖，也许UI-Grid可以帮助你ng-table失败的地方。
披露：我与ui-grid没有任何关系，我仍然非常关注它是否是好的
答案 2 :(得分：0)
在我们的情况下，我们使用ng-table-dynamic为我们提供了一组自定义列，这些自定义列需要在代码级别的数据库中映射用户列表。由于映射是在代码级别手动进行的，因此我们找到了一种使用ng-table-dynamic处理过滤和排序的独特方法。
这是代码
function initialize() {
this.$scope.userList = new this.NgTableParams({
page: 1,
count: 10
}, {
counts: [],
total: this.usersList.length,
getData: (params) => { // handles custom sorting or filtering
var results= [];
//add logic here if any
results = this.$filter('filter')(results, this.$scope.searchKey);
params.total(results.length);
pages = Math.ceil(params.total()/ params.count());
if(pages > 1){
results = results.slice((params.page() - 1)* params.count(), params.page() * params.count());
}
return results;
}
});
}
注意：我们使用声明的变量结果，它将包含要呈现给表的数据。
同样在控制器中我们需要处理自定义搜索
这是代码：
this.$scope.$watch('searchKey',(newValue)=>{
if(typeof newValue !== 'undefined'){
this.$scope.userList.reload();// cause re-render of result in key-press
}
});
此代码将触发NgTableParams的getData函数，允许您构建自定义过滤器。
注意：您还需要保留结果数组，以便存储在$ scope变量中
代码将如下所示
function foo() {
Provider('Method', (error, users) => {
if (!error) {
this.usersList = users;
this.$scope.userList.reload(); // cause render of results to the table
this.$scope.$apply();
}
});
}