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

Question

我想创建一个 ngTable，它是来自 ngTable站点的 #4（过滤器）和 #18（自定义标题）示例的组合。我无法让它工作。谁能给我一个例子？谢谢！

Answer 1

由于仅融合这两个示例似乎确实不起作用，因此我根据 ng-table 站点的示例 #18 为您创建了一个新表，请参阅http://bazalt-cms.com/ng-表/示例/18。

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

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

为了让表用作过滤器的变量，它必须被“声明”并附加到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-型号）。

这是过滤和排序数据的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 中存在两个问题，即阻止自定义标题并同时显示过滤器。

1. ng-table 只查看第一个 tr 元素。所以它们不可能同时发生。
2. 如果用户指定了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>