我正试图使用ngTable构建一个表，但使用与ngTable页面示例中描述的不同的自定义筛选。
我希望过滤到位，但不希望ngTable呈现过滤器选择器。我想自己呈现它们(在表上方(，然后在我的"getData(("方法中引用它们。
前面提到的例子并没有解释这些机器是如何工作的。我不知道在每个"td"元素的"filter"属性中到底需要指定什么。我理解AngularJS$filter函数的基本语法，但我不清楚ngTable对此做了什么。从一个例子来看，我似乎只能进行"等于"检查，即只选择关联列值等于筛选值的行。那不是我所需要的。
我的表有好几列。其中两个被称为"key"one_answers"failed"，分别是字符串和布尔值。当我在表上方呈现这些过滤器字段时，我需要一个"失败"过滤器的自定义标签。"key"列的筛选应将筛选值与"key"值的任何子字符串相匹配。例如，如果我有"abc"、"abac"one_answers"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 -->
这是我的表格参数代码：
$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"列表中迭代。当它像这样工作时，当我单击"仅显示失败的查询"复选框或在"keyFilter"输入字段中输入文本时，列表会立即更改。
但是，现在我使用的是"$data"列表，当我更改其中任何一个字段时都不会发生任何事情。事实上，我甚至为这两个字段添加了$watch-es，但它们都没有开火。然而，当我对这两个字段中的任何一个进行更改时，我知道表数据正在被重新评估，因为其中两列的数据应该是millis值，并且我在这些列上有一个自定义过滤器，可以将值转换为"时间之前"的英文表达式，如"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表中得到一个错误，抱怨范围为null。
更新：
我尝试将"newvalue，oldvalue"参数添加到$watch es中(我更新了plunkr(。现在，对字段的更改将导致表更新。不幸的是，我仍然在ng表的第411行得到堆栈跟踪。
您不需要手表，也不需要您创建的自定义过滤器。事实上，angular的"filter"滤波器非常强大。
您只需要创建一个对象来跟踪您的筛选值，该对象的成员与您的项目字段相匹配。像这样的东西。
$scope.filter = {
key: undefined,
failed: undefined
}
则可以使用CCD_ 2在CCD_。我在这里更新了你的plunker。您也可以检查以下样本：
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>您似乎遇到了ng-table本身的问题，这是一个没有得到很好支持的第三方库。
作为证据，请查看他们的Github页面，该页面有200多个开放问题和1200颗星(1:6(：
https://github.com/esvit/ng-table
与D3.js这样的图书馆相比，后者得到了《纽约时报》的全力技术和资金支持。它有150期，超过30000颗恒星(1:200(。
https://github.com/mbostock/d3
大量的开放问题意味着人们发现错误的速度比开发人员解决错误的速度还要快。更有可能的是，开发人员可能已经转向了新的项目，不再对维护这个库感兴趣。
换句话说，您遇到了库本身的功能限制。当这种情况发生时，你有两个选择，
1.停止使用库并选择一个新库，或者构建自己的库
遗憾的是，我已经研究过了，现在没有一个真正好的角度表库
2.分叉存储库，学习库的内部工作原理，自己实现所需的功能，并提出pull请求
只是为了让这不是一个完全的麻烦，也许UI-Grid可以在ng-table失败的地方帮助你。
http://ui-grid.info/
披露：我不隶属于ui网格，仍然对它是否好持观望态度
在我们的情况下，我们使用了ng表动态来拥有一组自定义列，这些自定义列需要在代码级别映射到数据库中的用户列表中。由于映射是在代码级别手动进行的，我们发现了一种独特的方法来处理ng表动态的过滤和排序。
这是代码
函数initialize(({这个$scope.userList=新建此。NgTableParams({页码：1，计数：10}{计数：[]，总计：this.usersList.length，getData:(params(=>｛//处理自定义排序或筛选var结果=[]；//在此处添加逻辑(如果有(结果=这个$filter('filter'((结果，this.$scope.searchKey(；params.total(results.length(；pages=Math.ceil(params.total((/params.count(((；if(第>1页({results=results.slice((params.page((-1(*params.count((，params.page((*params.count(((；}返回结果；}})；}
注意：我们使用了一个声明的变量results，其中它将包含要呈现到表中的数据。
此外，在控制器中，我们需要处理自定义搜索
这是代码：
这个$范围$watch('searchKey'，(newValue(=>{if(typeof newValue！=='undefined'({这个$scope.userList.reload((；//导致在按键时重新呈现结果}})；
这段代码将触发NgTableParams的getData函数，允许您构建自定义过滤器。
注意：您还需要保留结果数组，因此需要存储在$scope变量中
代码将如下所示
函数foo(({提供者("方法"，(错误，用户(=>{if(！error({this.usersList=用户；这个$scope.userList.reload((；//将结果呈现到表中这个$范围$apply((；}})；}