使用 AngularJS ngTable 自定义过滤器

我正在尝试使用 ngTable 构建一个表，但使用与中描述的不同的自定义过滤ngTable 页面的示例 http://bazalt-cms.com/ng-table/example/11.

我希望进行适当的过滤，但我不希望 ngTable 呈现过滤器选择器。我想自己渲染它们（在表格上方），然后在我的“getData()”方法中引用它们。

前面提到的例子并没有解释这些机器是如何工作的。我不知道每个“td”元素的“filter”属性中需要指定什么。我了解 AngularJS $filter 函数的基本语法，但我不清楚 ngTable 对此做了什么。从一个示例来看，我似乎只能进行“等于”检查，这只会选择关联列值等于过滤器值的行。这不完全是我所需要的。

我的表有几列。其中两个称为“key”和“failed”，分别是字符串和布尔值。当我在表格上方呈现这些过滤器字段时，我需要为“失败”过滤器提供自定义标签。对“key”列的过滤应将过滤器值与“key”值的任何子字符串相匹配。例如，如果我有“abc”、“abac”和“def”键值，则过滤器值“a”将导致显示前两个条目，而不显示“def”条目。

Update:

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

假设我的表元素中有一个像这样的 ngRepeat 表达式，使用“标准”Angularjs 过滤器：

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

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

同时，我需要能够通过在正常处理中执行该过滤器链来“关闭” AngularJS 本身正在执行的过滤。

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

Update:

以下是我的 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());
        });

Update:

这是我的plunkr http://plnkr.co/edit/Sb6AeAs5WxY9D1L14X0n这表明更改外部过滤器字段不起作用。我还注释掉了两个 $watch-es 来尝试纠正这个问题。当我评论这些内容时，我在 ng-table 中收到一个错误，抱怨范围为空。

Update:

我尝试将“newvalue，oldvalue”参数添加到我的 $watch-es （我更新了 plunkr）。现在，字段的更改会导致表更新。不幸的是，我仍然在 ng-table 的第 411 行得到堆栈跟踪。

您不需要手表，也不需要您创建的自定义过滤器。其实Angular的'filter'过滤器是相当强大的。

您只需要创建一个对象来跟踪您的过滤器值以及与您的项目字段匹配的成员。像这样的东西。

$scope.filter = {
    key: undefined,
    failed: undefined
}

然后你可以把它带回里面getData回调使用params.filter()。 我已经更新了你的笨蛋在这里 http://plnkr.co/edit/yBEbhGFELziOQ20Eepk8?p=preview。您还可以检查下面的示例：

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>