使用AngularJS ngTable自定义过滤器

我正在尝试使用ngTable构建一个表,但使用不同于ngTable页面示例中描述的自定义过滤.

我想要过滤,但我不希望ngTable呈现过滤器选择器.我想自己渲染它们(在表格上方),然后在我的"getData()"方法中引用它们.

前面提到的例子没有解释任何一种机制是如何工作的.我不知道在每个"td"元素的"filter"属性中确切需要指定什么.我理解AngularJS $ filter函数的基本语法,但我不清楚ngTable在做什么.从一个例子看,我看起来只能进行"等于"检查,这只会选择相关列值等于过滤值的行.这不是我需要的.

我的表有几列.其中两个被称为"key"和"failed",分别是string和boolean.当我在表格上方渲染这些过滤字段时,我需要为"失败"过滤器设置自定义标签.过滤"key"列应该将过滤器值与"key"值的任何子字符串匹配.例如,如果我的键值为"abc","abac"和"def",则过滤值"a"将导致前两个条目显示,而不显示"def"条目.

更新:

与此相关,我希望我能弄清楚如何做这样的事情:

假设我的表元素中有一个ngRepeat表达式,使用"standard"angularjs过滤器:

"item in $data | customfilter:param | anothercustomfilter:param"

我们知道这不太有效,因为这些过滤器仅适用于从"getData()"方法获得的一个页面切片.我真正希望能够在我的"getData()"方法中做的只是访问整个过滤器链,包括参数表达式,并简单地将一个不同的数组传递给它,作为整个原始数据列表,而不仅仅是页面切片.

与此同时,我需要通过在正常处理中执行该过滤器链来"关闭"过滤angularjs自己做的事情.

这听起来很难,但我发现当前的API需要在html和javascript之间进行大量的耦合.如果html可以指定所需的过滤,那将是很好的,javascript将只使用整个过滤器链,但在整个数据列表上使用它,而不仅仅是页面切片.

更新:

以下是我的HTML的相关摘录:

Filter Keys:

Show only queries that failed?

这是我的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,而且他们都没有开火.但是,当我对这两个字段中的任何一个进行更改时,我知道正在重新评估表数据,因为其中两列的数据预计为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-table中得到一个错误,抱怨null范围.
更新:
我尝试将"newvalue,oldvalue"参数添加到我的$ watch-es(我更新了plunkr).现在,对字段的更改会导致表更新.不幸的是,我仍然在ng-table的第411行获得了堆栈跟踪.


1> cleftheris..：
您不需要手表,也不需要您创建的自定义过滤器.实际上,角度的'过滤器'过滤器功能非常强大.
您只需创建一个对象,使用与您的项目字段匹配的成员来跟踪您的过滤器值.像这样的东西.
$scope.filter = {
    key: undefined,
    failed: undefined
}
那么你可以getData使用回调内部params.filter().我在这里更新了你的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()));
        }
    });
});





  Filter Keys:
  
  Show only queries that failed?
  
  

  

    

        
{{queryInfo.key}}
        
{{queryInfo.lastRun}}
        
{{queryInfo.lastSuccessfulRun}}
        
{{queryInfo.elapsedTime}} ms
        
{{queryInfo.rows}}
        
{{queryInfo.failed}}
        
Detail