ngTables 中的角度自定义过滤答案

【问题标题】：angular custom filtering in ngTablesngTables 中的角度自定义过滤
【发布时间】：2014-08-07 11:38:37
【问题描述】：

我正在尝试在 ngTables 中进行一些自定义过滤（类似于 this example），但使用文本输入字段。我有一组带有标准文本输入过滤器的列，其中一些我想使用我自己的过滤功能，不是默认的角度$filter('filter')(array, params.filter())，而是类似$filter('myOwnFilter')(array, params.filter())

过滤发生在我的控制器中：

var orderedData = params.filter() ? $filter('filter')(array, params.filter()) : array;

我有什么：

<td class="text-left" data-title="'Name'" filter="{ 'Column': 'myOwnFilter' }" data-sortable="'Column'">
  {{ array.Column }}
</td>

和模板：

<script type="text/ng-template" id="ng-table/filters/myOwnFilter.html">
  <input type="text" name="myOwnFilter" data-ng-model="params.filter()[name]" data-ng-if="filter == 'myOwnFilter'" class="input-filter form-control"/>
</script>

【问题讨论】：

标签： javascript angularjs filtering ngtable

【解决方案1】：

正如在这个问题https://stackoverflow.com/a/27296677/61577 中回答的那样，您必须在控制器中使用自定义“比较器”函数作为第三个参数。一个简单的例子

var myCustomComparator = function(value, searchTerm) {
    return (value || '').indexOf(searchTerm) > -1;
}

然后在你的 getData 回调中

var orderedData = params.filter() ? $filter('filter')(array, params.filter(), myCustomComparator) : array;

请注意，如果您需要针对不同的列/字段使用不同的比较器，则必须检查 params.filter()。

filter comparator 的 Angular 文档

【讨论】：

不同列的不同比较器。它是怎么做的？

【解决方案2】：

假设您要添加一个过滤器，该过滤器仅显示具有属性 avg 大于您的过滤器的行：

查看

<td data-title="'Average'" sortable="'avg'" filter="{ 'min': 'number' }">

控制器

vm.filtered = params.filter() ? filterData(params, vm.filtered) : vm.filtered;

还有自定义过滤器

function filterData(params, data) {
              var min;
              if (params.filter() && params.filter().min) {
                  //remove default params.filter().min filter
                  min = params.filter().min;
                  delete params.filter().min;
                  //filter data by min
                  data = _.filter(data, function (d) { return min <= d.avg; });
              }
              //use the normal filter
              data = params.filter() ? $filter('filter')(data, params.filter()) : data;
              if (min != undefined)//add it back
                  params.filter().min = min;
              return data;
          }

【讨论】：