angularjs - 创建一个自过滤的 AngularJS 结果集

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"
    }];

以上我的产品有

1. 一组颜色
2. 特定品牌

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

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;
}

});