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 =“属性中的属性| conveniences_filter：types”

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

此处属性的示例：

对象{name：property，wifi：false，balcony：true}

我希望它会有用:)

Answer 1

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

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

我总结了一个解决上述要求的小例子。通常，您应该使用ECMA5.1附带的数组额外函数，并使事情更加简单和实用。

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

干杯只园

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

1 个答案: