Question

我在这里创建了我的jsfiddle以供参考： http://jsfiddle.net/7gzDG/

 $scope.list = [{
        "Colors": ["Blue", "Eggplant", "Green", "Pink", "Yellow"],
            "Brand": "BRAND A",
            "Name": "Item 1"
    }, {
        "Colors": ["Black", "Dark Teal", "Eggplant"],
            "Brand": "BRAND A",
            "Name": "Item 2"
    }, {
        "Colors": ["Ivory", "Pink"],
            "Brand": "BRAND A",
            "Name": "Item 3"
    }, {
        "Colors": ["Black", "Brown", "Red", "White"],
            "Brand": "BRAND B",
            "Name": "Item 4"
    }];

我的产品上面有

一系列颜色
特定品牌

我可以将每个列表的不同列表构建为复选框。

myApp.filter('uniqueColors', function () {
    return function (list) {
        var colors = {};
        angular.forEach(list, function (obj) {
            angular.forEach(obj.Colors, function (color) {
                colors[color] = color;
            })
        });
        //console.log(colors);
        var uniqueColors = []
        for (var key in colors) {
            uniqueColors.push(key);
        }
        return uniqueColors;
    }
});

myApp.filter('uniqueBrands', function () {
    return function (list) {
        var brands = {};
        angular.forEach(list, function (obj) {
            brands[obj.Brand] = obj.Brand;
        });
        //console.log(brands);
        var uniqueBrands = []
        for (var key in brands) {
            uniqueBrands.push(key);
        }
        return uniqueBrands.sort();
    }
});

我的问题是，当我检查它们时，我无法弄清楚如何过滤原始结果集。例如，如果我检查“蓝色”，我希望所有产品都保留蓝色。

如果我选中蓝色和红色，我希望所有带有蓝色或红色的产品都保留。

如果我用品牌A检查蓝色和红色，我希望所有品牌A的产品都有蓝色或红色。

谢谢你看看！

Answer 1

我不确定这是否是您要找的，但我为产品创建了另一个过滤器。

http://jsfiddle.net/btcxV/3/

myApp.filter('filterProduct', function() {
return function(list, colorFilter, brandFilter) {
    var products = [];

    if((Object.keys(colorFilter).length == 0) && (Object.keys(brandFilter).length == 0))
        return list;

    angular.forEach(list, function(product) {  

      angular.forEach(product.Colors, function(color) {  

        if(colorFilter[color])
            products.push(product);
      });
      angular.forEach(product.Brands, function(brand) {  

        if(brandFilter[color])
            products.push(product);
      });            

    });

    return products;
}

}）;

创建自我过滤的AngularJS结果集

1 个答案: