如何用angularJS中的多个复选框创建一个动态过滤器

我一直在寻找严峻的日子，如何在AngularJS中轻松创建一个包含多个复选框的动态过滤器，并且我找到的解决方案都不满意。如何用angularJS中的多个复选框创建一个动态过滤器

下面是一个过滤器的示例，当取消选中复选框时将显示所有内容，并在复选框被选中时过滤数据。（适合搜索引擎来寻找带wifi的酒店，阳台...为例）

筛选：

app.filter('conveniences_filter', function() { 
    return function(items, types) { 
     var filtered = []; 
     var displayItem; 
     angular.forEach(items, function(item) { 
      displayItem = true; 
      angular.forEach(types, function(type, key) {   
       if(type == true && item[key] == false) { 
        displayItem = false; 
       } 
      }); 
      if(displayItem == true) { 
       filtered.push(item); 
      } 
     }); 
     return filtered; 
    }; 
});

在你的控制器：

$scope.types = {wifi: false, balcony: false}

在您的HTML中

ng-repeat =“property in property | conveniences_filter：类型”

重要提示：您在$ scope.types密钥必须与您的钥匙在你的属性的项目，或者它不是要去工作在这里的属性

例：

对象{名称：财产，无线网络：假的，阳台：真正}

我希望这会是有用的:)

来源

2014-07-23 Maxime Plancke

我认为这不是100％清楚你的要求在这里。至少从我写的代码中得到的结果是，您想要根据对象的属性值过滤对象列表，并且使用用于与对象进行比较的“模式”对象。

为了填补需求中的空白，我假设您想针对包含也需要在项目中匹配的属性的“模式”对象进行验证。我还假设，如果一个属性不在“模式”对象中，那么它将与比较无关。此外，我还假定您希望“模式”中的所有现有属性都是有效/匹配的，否则不会考虑该项目。

我已经整理了一个解决上述要求的小例子。一般来说，您应该使用ECMA5.1附带的数组额外功能，并使事情变得更加简单和实用。

例子：http://jsbin.com/velobi/1/edit

干杯祗园

来源

2014-07-23 12:12:38 gkunz

我只是呈现的方式来做到这一点。但是，感谢您的回答我是AngularJS的一名成员，很高兴看到其他更好的方式来做到这一点。不同之处在于，在我使用的解决方案中，筛选器仅在检查复选框时起作用。例如没有任何过滤器，你可以看到所有的属性，即使他们没有WiFi。当你检查wifi复选框时，过滤器会隐藏没有wifi的属性。有时可能有用 –

嗨，多数民众赞成酷我认为它总是很高兴看到其他方法。不一定比另一个好。您仍然可以在我的解决方案中实现您的方法，但需要注意的是，在属性对象中，CHECKED表示键：true，UNCKECKED表示该属性不应存在。 key：false将意味着该属性应该在该项目中显式为false。 – gkunz

如何用angularJS中的多个复选框创建一个动态过滤器

回答

相关问题