如何在 ng-repeat 中动态禁用过滤器 [英] How to dynamically disable a filter inside ng-repeat

问题描述

是否可以使用复选框删除过滤器?

It is possible to remove filter using a checkbox?

如果复选框被选中，ng-repeat 中的过滤器将被禁用.例如，如果选中countryfilter 和winetypefilter 复选框，则相关过滤器将被禁用.

If checkboxes are checked, filters inside ng-repeat would be disabled. For example, if the checkboxes countryfilter and winetypefilter are checked, the related filters would be disabled.

原始代码(启用过滤器)

Original code (filters enabled)

<li ng-repeat="wine in wines | winetypefilter:winetypes| countryfilter:countrytypes | stylefilter:styletypes">
                {{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
</li>

(使用复选框禁用过滤器，countryfilter 和 winetypefilter)结果:

(filters disabled with the checkboxes, countryfilter and winetypefilter ) Would result:

<li ng-repeat="wine in wines | stylefilter:styletypes">
            {{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
</li>

推荐答案

当然你可以动态启用禁用你的过滤器......有很多方法可以做到这一点，我想到的最简单的解决方案就是发送第三个参数作为一个布尔值来检查过滤器是否启用...

of course you can enable disable your filter dynamically... there can be many ways to do it simplest solution that comes to my mind is just sending third parameters as a boolean to check if filter is enable or not...

这里是过滤器示例...

here is filter sample...

app.filter('winetypefilter', function () {
  return function(input, filter, isEnable) {
    // if isEnable then filter out wines
    if (isEnable) {
      var result = [];
      angular.forEach(input, function (wine) {
          angular.forEach(filter, function (isfiltered, type) {
              if (isfiltered && type === wine.type) {
                  result.push(wine);
              }
          });
      });
      return result;
    } 
    // otherwise just do not any filter just send input without changes
    else{
      return input
    }
  };
});

这里是 PLUNKER...

这篇关于如何在 ng-repeat 中动态禁用过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！