创建自过滤 AngularJS 结果集



我在这里创建了我的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 的产品中都有蓝色或红色。

感谢您的观看!

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

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

});

最新更新