Question

我想创建一个ngTable，它是来自ngTable site的＃4（过滤器）和＃18（自定义标头）示例的组合。我无法让它发挥作用。有人能告诉我一个例子吗？谢谢！

Answer 1

由于仅通过融合两个示例似乎无法工作，我已根据ng-table网站的示例＃18为您创建了一个新表，请参阅http://bazalt-cms.com/ng-table/example/18。< / p>

首先，我在其中添加了一个带有 ng-model 的新输入字段，以便键入该字段的用户输入可以绑定到angularjs脚本。像这样：

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

为了让变量被表用作过滤器，必须声明＆＃34;＆＃34;并通过以下方式附加到 ng-table （https://github.com/esvit/ng-table/wiki/Configuring-your-table-with-ngTableParams）：

$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）中使用了稍微修改过滤脚本的版本来过滤所述变量（由 ng-model 绑定）。

以下是过滤和排序数据的 getData 函数：

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

这对我有用。

您可以在此Plunk上找到该表：http://plnkr.co/edit/ntnNqxmKsQoFmSbo0P57?p=preview

Answer 2

ng-table中存在两个问题，即阻止自定义标题并同时显示过滤器。

ng-table仅查看第一个tr元素。所以他们不可能同时成为可能。
如果用户指定了thead，它会完全忽略过滤器模板，因为它附加到ng-table提供的thead上。

以下是我对ng-table进行的修复，以解决上述问题。请更改 ng-table.js ，如下所示：

scope.templates = {
                            header: (attrs.templateHeader ? attrs.templateHeader : 'ng-table/header.html'),
                            pagination: (attrs.templatePagination ? attrs.templatePagination : 'ng-table/pager.html'),
                            filter: 'ng-table/filter.html'
                        };


        var trInsideThead = thead.find('tr');
                                if(thead.length > 0 && trInsideThead.length==1){
                                    var filterTemplate = angular.element(document.createElement('tr')).attr({
                                        'ng-include': 'templates.filter',
                                        'ng-show' : 'show_filter',
                                        'class' : 'ng-table-filters'
                                    });            
                                    var headerTemplate = thead.append(filterTemplate);
                                }
                                else{
                                    var headerTemplate = thead.length > 0 ? thead : angular.element(document.createElement('thead')).attr('ng-include', 'templates.header');                   
                                }

        //Put this in the templatecahce

        $templateCache.put('ng-table/filter.html', '<th ng-repeat="column in $columns" ng-show="column.show(this)" class="filter"> <div ng-repeat="(name, filter) in column.filter"> <div ng-if="column.filterTemplateURL" ng-show="column.filterTemplateURL"> <div ng-include="column.filterTemplateURL"></div> </div> <div ng-if="!column.filterTemplateURL" ng-show="!column.filterTemplateURL"> <div ng-include="\'ng-table/filters/\' + filter + \'.html\'"></div> </div> </div> </th>');

    You need to invert the thead and tbody in the html

    <table>
      <tbody>
      </tbody>
      <thead>
      </thead>
   </table>

如何在ngTable中组合客户头和过滤器

2 个答案: