当复选框为false（禁用）时，如何禁用AngularJs过滤器？ [英] How to disable an AngularJs filter when checkboxes are false (disabled)?

问题描述

我有一个关于如何禁用与复选框相关的AngularJS过滤器的问题。

I have a question about how to disable a AngularJS filter related to checkboxes.

我有一个经典的结构：

对象：

 $scope.wines = [
    { "name": "Wine a", "type": "red", "country": "france", "style": "strong" },
    { "name": "Wine a", "type": "white", "country": "italie", "style": "medium" },
    { "name": "Wine a", "type": "white", "country": "france", "style": "light" },
    { "name": "Wine a", "type": "rose", "country": "usa", "style": "strong" },
    { "name": "Wine a", "type": "champagne", "country": "chili", "style": "medium" },
    { "name": "Wine a", "type": "red", "country": "brazil", "style": "strong" },
    { "name": "Wine a", "type": "red", "country": "france", "style": "strong" }
  ];
  $scope.winetypes = {red : true,white : true,rose : true, champagne : true};

此过滤器仅用于显示与复选框相关的选项：

This filter is used to display only the related choice made with the checkboxes:

app.filter('winetypefilter', function () {
  return function(input, filter) {
    var result = [];
    angular.forEach(input, function (wine) {
        angular.forEach(filter, function (isfiltered, type) {
            if (isfiltered && type === wine.type) {
                result.push(wine);
            }
        });
    });
    return result;
  };

结果以此html代码显示：

The results are displayed with this html code:

<li ng-repeat="(type, value) in winetypes">
  <input type="checkbox" ng-model="winetypes[type]" /> {{type}}
</li>

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

• 当所有葡萄酒复选框未选中），以禁用 winetypefilter ，以显示页面上的所有结果。我尝试没有成功！


• I would, when all the wines check-boxes are unchecked (false), to disable the winetypefilter, to display all the results on the page. I tried without success!!

这里的演示： http://plnkr.co/edit/nIQ2lkiJJY9MwJKHrqOk?p=preview

推荐答案

您可以实际调整您的自定义过滤器 winetypefilter ，以检查是否所有 winetypes 布尔值被禁用。如果所有值都被禁用，那么只需返回原始数组，在这种情况下输入，否则继续使用原始过滤器。

You can actually tweak your custom filter, winetypefilter, to check if all winetypes boolean values are disabled. if all values are disabled, then simply return the original array, in this case input, otherwise continue with your original filter.

注意：我也更改了过滤winetypes的方式，不需要额外的 forEach 层来确定是否应该进行过滤。只需检查 winetypes json

Note: I also changed the way you filtered the winetypes, the extra layer of forEach wasn't necessary to determine if filtering should take place. just check if wine.type of filter was true in the winetypes json

Forked Plunker

例如

app.filter('winetypefilter', function () {
  return function(input, filter) {
    var result;

    if(canFilter(filter)) {
      result = [];
      angular.forEach(input, function(wine) {
        if(filter[wine.type])
          result.push(wine);
      });
    } else
      result = input;

    return result;
  };

  function canFilter(filter) {
    var hasFilter = false;
    angular.forEach(filter, function(isFiltered) {
      hasFilter = hasFilter || isFiltered;
    });
    return hasFilter;
  }
});

这篇关于当复选框为false（禁用）时，如何禁用AngularJs过滤器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！