如何在angularJS中创建具有多个复选框的动态过滤器

Question

我一直在寻找如何在 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 properties | 便利过滤器：类型"

重要提示：$scope.types 中的键必须与属性项中的键相同，否则将无法正常工作。

这里的属性示例：

对象{名称：属性，wifi：假，阳台：真}

希望对你有用:)

Answer 1

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

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

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

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

干杯 只园