Angularjs 如何在ngTable中组合客户标头和筛选器

我想创建一个ngTable，它是ngTable中#4（filter）和#18（customheader）示例的组合。我不能让它工作。谁能给我举个例子吗？谢谢

由于仅仅融合这两个示例似乎并不奏效，因此我基于ng table站点的示例18为您创建了一个新表，请参见

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

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

及

最后，我使用了示例#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()));
}

这对我起了作用

---

您可以在此列表中找到该表：

ng表中存在两个问题，这两个问题阻止了标题的自定义，同时显示了过滤器

ng表格只查看第一个tr元素。因此，它们不可能同时发生

如果用户指定了THAD，则会完全忽略过滤器模板，因为它附加到ng表提供的THAD

下面是我对ng表所做的修复，以修复上述两个问题。 请将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>

scope.templates={
header：（attrs.templateHeader？attrs.templateHeader:'ng table/header.html'），
分页：（attrs.templatePagination？attrs.templatePagination:'ng table/pager.html'），
筛选器：“ng table/filter.html”
};
var trInsideThead=thead.find（'tr'）；
if（thead.length>0&&trInsideThead.length==1）{
var filtertTemplate=angular.element（document.createElement（'tr'））.attr({
'ng include'：'templates.filter'，
“ng show”：“show_filter”，
'class'：'ng表过滤器'
});            
var headerTemplate=thead.append（filterTemplate）；
}
否则{
var headerTemplate=thead.length>0？thead:angular.element（document.createElement（'thead'））.attr（'ng-include'，'templates.header'）；
}
//把这个放进模板里
$templateCache.put（'ng-table/filter.html'，''；
您需要在html中反转thead和tbody

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

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>