如何在ngTable客户头和过滤器相结合 [英] how to combine the customer header and filter in ngTable

问题描述

我想创建一个ngTable是＃4（过滤器）和＃18（自定义标题）从ngTable的网站。我无法得到它的工作。谁能告诉我一个例子？谢谢！

I would like to create a ngTable that is the combination of the example of #4 (filter) and #18 (custom header) from the ngTable site. I can not get it to work. Can anyone show me an example? Thanks!

推荐答案

由于它确实似乎没有刚融​​合的两个例子来工作，我已经具有基于NG的例子＃18中创建一个新表给你-table站点，请参见 http://bazalt-cms.com/ng-table/example/ 18 。

Since it really doesn't seem to work by just fusing the two examples, I have have created a new table for you based on example #18 of the ng-table site, see http://bazalt-cms.com/ng-table/example/18.

首先，我添加了一个新的输入字段用的 NG-模型的它，这样被输入到该领域的用户输入可以绑定到angularjs脚本。像这样：

First I have added a new input field with an ng-model in it so that the user-input that is typed into the the field can be bound to the angularjs script. Like so:

<tr>
    <th colspan="3">
        <input class="form-control" type="text" ng-model="filters.myfilter" placeholder="Filter"  />
    </th>
</tr>

在为了具有可变的表作为过滤器使用，它必须是声明和附加到纳克表的（ https://github.com/esvit/ng-table/wiki/Configuring-your-table-with -ngTableParams ）以下列方式：

In order to have the variable be used by the table as a filter, it has to be "declared" and attached to the ng-table (https://github.com/esvit/ng-table/wiki/Configuring-your-table-with-ngTableParams) in the following way:

$scope.filters = {
    myfilter: ''
};

和

$scope.tableParams = new ngTableParams({
            page: 1,            
            count: 10,           
            filter: $scope.filters, //now the filter is attached to the ng-table
        }

最后，我已在实施例＃6中使用的过滤脚本的一个略加修改的版本（ http://bazalt-cms.com/ng-table/example/6 ）来筛选对所述变量（这是由纳克模型结合的）。

Lastly, I have used a slightly modified version of the filtering script in example #6 (http://bazalt-cms.com/ng-table/example/6) to filter for the said variable (which was bound by the ng-model).

下面是的getData 的功能是过滤器和定单数据：

Here is the getData function that filters and orders the data:

getData: function($defer, params) {

    var filtered_data = params.filter() ? $filter('filter')(data, params.filter().myfilter) : data;
    filtered_data = params.sorting() ? $filter('orderBy')(filtered_data, params.orderBy()) : filtered_data;

    $defer.resolve(filtered_data.slice((params.page() - 1) * params.count(), params.page() *   params.count()));
}

这奏效了我。

您可以找到这个普拉克表： http://plnkr.co/编辑/ ntnNqxmKsQoFmSbo0P57？p = preVIEW

You can find the table on this Plunk: http://plnkr.co/edit/ntnNqxmKsQoFmSbo0P57?p=preview

这篇关于如何在ngTable客户头和过滤器相结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！