与AngularJS ngTable自定义过滤器 [英] Custom filter with AngularJS ngTable

问题描述

我试图构建使用ngTable表，但比在从这个例子ngTable页。

我要过滤的地方，但我不想ngTable渲染过滤器选择。我想使它们自己（上表），然后在我的的getData（）方法中引用它们。

前面提到的例子并没有解释如何任何机械工程。我需要在每个TD元素的过滤属性来指定不知道到底是什么。据我所知，AngularJS $过滤功能的基本语法，但我不是什么ngTable用此做清楚。从一个例子，它看起来像我只能做等于检查，那样只会选择的行相关联的列值等于过滤器值。这不是完全是我所需要的。

我的表有几列。其中的两个被称为键和失败，分别为串和布尔值。当我渲染上表中这些过滤器领域，我需要为失败过滤器的自定义标签。滤波的钥匙一栏应与钥匙值的任意字符串过滤器值。举例来说，如果我有ABC，亚太经合组织工商咨询理事会和高清，a的将导致前两个条目显示，而不是显示了高清项过滤器值的键值。

更新：

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

让我们说我有像这样我的表元素的ngRepeat前pression，使用标准angularjs过滤器：

 在$数据项| customfilter：参数| anothercustomfilter：参数
 

我们知道，这完全不是那么回事，因为这些过滤器将仅适用于从的getData（）方法获得一个页面片。我真的希望能在我的的getData（）方法简单地访问整个过滤器链，包括参数前pressions做的，简单地传递一个不同的数组进去，成为整个原始数据列表中，而不仅仅是网页切片。

与此同时，我需要能够关闭过滤angularjs由自己做，在其正常处理执行该过滤器链。

这听起来很困难，但我觉得目前的API需要大量的HTML和JavaScript之间的耦合。这将是很好，如果可以的HTML指定所需的过滤，以及JavaScript将只使用整个过滤器链，但使用它的整个数据表，而不仅仅是网页切片。

在

更新：

下面是从我的HTML相关摘录：

 ＆LT;标签=keysFilter过滤器过滤键：LT; /标签＆gt;
＆LT;输入ID =keysFilter类型=文本NG模型=keysFilter/＆GT;
＆LT;标签=showOnlyFailed＆gt;显示只有失败的查询＆LT;？/标签＆gt;
＆LT;输入ID =showOnlyFailed类型=复选框NG模型=showOnlyFailed/＆GT;
＆LT;表NG表=tableParams表分页=定制/页级=表＆GT;
＆LT; TR NG重复=queryInfo在$数据＆GT; ＆所述;！ -  | filterFailed：showOnlyFailed | filterMatchingKeys：keysFilter  - ＆GT;
 

下面是我的tableParams code：

  $ scope.tableParams =新ngTableParams（{
    页面：1，
    数：10，
    排序：{
        LASTRUN：递减
    }
}，
{
    debugMode：真实，
    总计：$ scope.completedQueries.length，
    的getData：函数（$延迟，则params）{
        VAR orderedData = params.sorting（）？
                $过滤器（'排序依据'）（$ scope.completedQueries，params.orderBy（））：
                数据;
        orderedData = $滤波器（'filterFailed'）（orderedData，$ scope.showOnlyFailed）;
        orderedData = $滤波器（'filterMatchingKeys'）（orderedData，$ scope.keysFilter）;        params.total（orderedData.length）;
        $ defer.resolve（orderedData.slice（（params.page（） -  1）* params.count（），
                                                     params.page（）* params.count（）））;
    }
}）;
 

请注意，我用这个ngTable没有使用$数据列表中，只是通过我的completedQueries名单迭代。当它的工作那样，名单将立即改变，当我点击复选框，或者在keysFilter输入字段中输入文本失败只显示查询。

然而，现在我使用了$ DATA名单，没事的时候我换两个字段的发生。事实上，我甚至增加$腕表-ES为这些字段，并把它们既不火灾。然而，当我修改其中任何一个领域，我知道，表中的数据正在被重新评估，因为两列有预计将米利斯值数据，我对这些列的自定义过滤器，翻译值一个很久以前英语EX pression，像30.秒前或1分钟前，而我每次改变这些投入的领域之一，一次我看到那些前pressions表中的变化，但它仍然没有做适当的过滤。

如果它很重要，这里是$腕表-ES，我加入到我的范围。这些看起来不会火了：

  $范围。$表（showOnlyFailed功能（）{
    $ scope.tableParams.reload（）;
}）;$范围。$表（keysFilter功能（）{
    $ scope.tableParams.reload（）;
}）;
 

请注意，当我有这些评论中，我看到了下面的错误，我打我的的getData（）之后方法：

 错误：设置$范围为空
@http：//本地主机：8000 / JS /诊断/库/ 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 /＆LT;。于是/＆LT; @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
引导/ doBootstrap /＆LT; @http：//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js：1341
调用@ HTTP：//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js：3762
引导/ doBootstrap @ HTTP：//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js：1340
引导@ 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
。就绪@ HTTP：//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js：2
沃顿知识在线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
9509线
 

这是code的相关版块：

  $ defer.promise.then（功能（数据）{
            。设置$加载= FALSE;
            日志（'ngTable：电流范围，设置$范围。）;
            如果（settings.groupBy）{
                。self.data这样= $设置范围$组=数据。
            }其他{
                。self.data这样= $设置范围$数据=数据; // 411线
            }
            设置$ scope.pages = self.generatePagesArray（self.page（），self.total（），self.count（））。
        }）;
 

更新：

下面是我的 plunkr 演示，改变外部滤波器领域不起作用。我也有两个$手表-ES注释掉，试图纠正这一点。当我评论那些，我得到NG-表中的一个错误，抱怨空范围。

更新：

我尝试添加了NEWVALUE，OLDVALUE参数，以我的$的手表-ES（我更新了plunkr）。现在改变字段导致表进行更新。不幸的是，我仍然可以在NG-表的411行堆栈跟踪。

解决方案

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

您只需要创建与匹配您的项目字段成员保持你的过滤器值的跟踪对象。事情是这样的。

  $ scope.filter = {
    键：不确定，
    失败：未定义
}
 

那么你可以把它送回去了里面的getData 使用回调 params.filter（）。
我在这里更新您的 plunker。您还可以查看下面的示例：

\r

\r

VAR应用= angular.module（'主'，['ngTable']） ;\r
\r
app.controller（'MainCtrl'，函数（$范围，$ HTTP，$过滤器，ngTableParams）{\r
\r
    $ 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}];\r
    $ scope.filter = {\r
        键：不确定，\r
        失败：未定义\r
    };\r
    $ scope.tableParams =新ngTableParams（{\r
        页面：1，\r
        数：10，\r
        过滤：$ scope.filter\r
    }，{\r
        debugMode：真实，\r
        总计：$ scope.completedQueries.length，\r
        的getData：函数（$延迟，则params）{\r
            VAR orderedData = params.sorting（）？ $过滤器（'排序依据'）（$ scope.completedQueries，params.orderBy（））：数据;\r
            orderedData = $过滤器（'过滤器'）（orderedData，params.filter（））;\r
            params.total（orderedData.length）;\r
            $ defer.resolve（orderedData.slice（（params.page（） - 1）* params.count（），params.page（）* params.count（）））;\r
        }\r
    }）;\r
}）;

\r

＆LT;链接HREF =htt​​ps://cdnjs.cloudflare.com/ajax /libs/ng-table/0.3.3/ng-table.min.css的rel =stylesheet属性/＆GT;\r
＆LT;链接HREF =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js＆GT;＆下; /脚本＆GT;\r
＆LT; D​​IV NG-应用=主NG控制器=MainCtrl＆GT;\r
  ＆LT;标签=keysFilter过滤器过滤键：LT; /标签＆gt;\r
  ＆LT;输入ID =keysFilter类型=文本NG模型=filter.key/＆GT;\r
  ＆LT;标签=showOnlyFailed＆gt;显示只有失败的查询＆LT;？/标签＆gt;\r
  ＆LT;输入ID =showOnlyFailed类型=复选框NG模型=filter.failed/＆GT;\r
  ＆LT; BR /＆GT;\r
  ＆LT;表NG表=tableParams级=表＆GT;\r
    ＆LT; TR NG重复=queryInfo在$数据＆GT;\r
        ＆LT; TD数据标题='关键'排序=关键＆GT; {{queryInfo.key}}＆LT; / TD＆GT;\r
        ＆LT; TD数据标题=上次运行'排序='LASTRUN'＆GT; {{queryInfo.lastRun}}＆LT; / TD＆GT;\r
        ＆LT; TD数据标题=最后一次成功运行'排序='lastSuccessfulRun'＆GT; {{queryInfo.lastSuccessfulRun}}＆LT; / TD＆GT;\r
        ＆LT; TD数据标题='经过时间'排序='elapsedTime'＆GT; {{queryInfo.elapsedTime}} MS＆LT; / TD＆GT;\r
        ＆LT; TD数据标题=行排序=行＆GT; {{queryInfo.rows}}＆LT; / TD＆GT;\r
        ＆LT; TD数据标题=失败排序='失败'＆GT; {{queryInfo.failed}}＆LT; / TD＆GT;\r
        ＆LT; TD数据标题=''＆GT;＆LT;按钮类=BTN＆GT;详情＆LT; /按钮＆GT;＆LT; / TD＆GT;\r
    ＆LT; / TR＆GT;\r
  ＆LT; /表＆gt;\r
＆LT; D​​IV＆GT;

\r

\r

\r

I'm trying to construct a table using ngTable, but with different custom filtering than described in the example from the ngTable page.

I want filtering in place, but I don't want ngTable to render the filter selectors. I want to render them myself (above the table), and then reference them in my "getData()" method.

The example referred to earlier doesn't explain how any of that machinery works. I have no idea exactly what needs to be specified in the "filter" property in each "td" element. I understand the basic syntax of the AngularJS $filter function, but I'm not clear on what ngTable is doing with this. From the one example, it looks like I can only do "equals" checking, which would only select rows where the associated column value is equal to the filter value. That isn't quite what I need.

My table has several columns. Two of them are called "key" and "failed", being string and boolean respectively. When I'm rendering these filter fields above the table, I need a custom label for the "failed" filter. Filtering for the "key" column should match the filter value with any substring of the "key" values. For instance, if I have key values of "abc", "abac", and "def", a filter value of "a" will result in the first two entries showing, and not showing the "def" entry.

Update:

Related to this, I wish I could figure out how to do something like this:

Let's say I have a ngRepeat expression in my table element like this, using "standard" angularjs filters:

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

We know that this doesn't quite work, as those filters will only apply to one page slice obtained from the "getData()" method. What I'd really like to be able to do in my "getData()" method is simply access the entire filter chain, including the parameter expressions, and simply pass a different array into it, being the entire original data list, not just the page slice.

At the same time, I'd need to be able to "turn off" the filtering angularjs is doing by itself, by executing that filter chain in its normal processing.

This sounds difficult, but I find the current API requires a lot of coupling between the html and the javascript. It would be nice if the html could specify the desired filtering, and the javascript would just use that entire filter chain, but use it on the entire data list, not just the page slice.

Update:

Here's a relevant excerpt from my 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 -->

Here's my tableParams code:

$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()));
    }
});

Note that I used have this ngTable not using the "$data" list, and just iterating through my "completedQueries" list. When it worked like that, the list would immediately change when I clicked on the "Show only queries that failed" checkbox, or entered text in the "keysFilter" input field.

However, now that I'm using the "$data" list, nothing happens when I change either of those fields. In fact, I even added $watch-es for both of those fields, and neither of them fire. However, when I make changes to either of those fields, I know the table data is being reevaluated, because two of the columns have data that are expected to be millis value, and I have a custom filter on those columns that translate the value to a "time ago" english expression, like "30 seconds ago", or "2 minutes ago", and each time I change one of those input fields, I see those expressions in the table change, but it still doesn't do the proper filtering.

If it matters, here are the $watch-es that I added to my scope. These never appear to fire:

    $scope.$watch("showOnlyFailed", function() {
    $scope.tableParams.reload();
});

$scope.$watch("keysFilter", function() {
    $scope.tableParams.reload();
});

Note that when I have these commented in, I see the following error after I hit my "getData()" method:

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

This is the relevant block of code:

            $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:

Here is my plunkr that demonstrates that changing the external filter fields doesn't work. I also have two $watch-es commented out to try to rectify this. When I comment those in, I get an error within ng-table, complaining of a null scope.

Update:

I tried adding the "newvalue, oldvalue" parameters to my $watch-es (I updated the plunkr). Now changes to the fields are causing the table to update. Unfortunately, I still get that stack trace on line 411 of ng-table.

解决方案

You don't need the watches nor the custom filters you created. Actually angular's 'filter' filter is quite powerful.

You just need to create an object that keeps track of your filter values with members that match your items fields. Something like this.

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

then you can take it back inside the getData callback using params.filter(). I have updated your plunker here. You can also check the sample below:

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>

这篇关于与AngularJS ngTable自定义过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！