如何在AngularJS中使用動態多個復選框過濾嵌套對象數組。 或與和過濾

Question

我試圖建立基於多個過濾器的產品列表。 我認為這應該很簡單，但至少不適合我。

這是plunkr http://plnkr.co/edit/vufFfWyef3TwL6ofvniP?p=preview

復選框是根據相應的模型動態生成的，例如sizes ， colours ， categories 。 子類別檢查框應執行“ OR”查詢，但橫截面應執行“ AND”查詢。

基本上像

filter:{categories:selectedcategories1} || {categories:selectedcategories2} | filter:{categories:selectedsizes1} || {categories:selectedsizes2}

問題是動態生成這些過濾器。 我也嘗試在控制器中使用過濾器-

var tempArr = [{'categories':'selectedvalue1'}, {'categories':'selectedvalue2'}];
var OrFilterObjects = tempArr.join('||');
$scope.products = $filter('filter')($scope.products, OrFilterObjects, true);

但是找不到為OrFilterObjects分配正確值的OrFilterObjects 。

現在，作為最新嘗試（在plunkr中），我嘗試使用自定義過濾器。 它也不返回或結果。

現在，我將其用作productFilter:search.categories:'categories'如果它會返回OR結果），那么我打算將其用作-

`productFilter:search.categories:'categories' | productFilter:search.colours:'colours' | productFilter:search.sizes:'sizes'`

因為我在這里尋求幫助，所以很高興有productFilter:search 。

我花了很多時間來找到這個簡單問題的解決方案，但是大多數示例都使用“非動態”復選框或平面對象。

可能是我想的方向錯誤，在這種情況下有一種更優雅，更簡單的Angular方法。 我很樂意針對類似解決方案的任何解決方案，其中可以使用自動動態生成的過濾器來過濾嵌套對象。 在我看來，任何購物應用程序都具有非常通用的用例，但到現在為止還沒有運氣。

Answer 1

您需要了解的第一件事：從任何定義上講，這個問題都不簡單。 您想基於數組中對象的屬性找到匹配項，該屬性是您要提供的輸入數組中對象的屬性，更不用說[OR組內] + [AND組間]關系，搜索屬性由.title或.name定義，並且條件選擇是完全動態的。 這是一個復雜的問題。

盡管這是購物車網站的常見情況，但我懷疑任何Web框架都將在其API中內置這種功能。 不幸的是，但我認為我們不能避免自己編寫邏輯。

無論如何，由於最終您只想聲明productFilter:search ，所以它是：

app.filter('productFilter', function($filter) {
    var helper = function(checklist, item, listName, search) {
        var count = 0;
        var result = false;
        angular.forEach(checklist, function(checked, checkboxName) {
            if (checked) {
                count++;
                var obj = {};
                obj[search] = checkboxName;
                result = result || ($filter('filter')(item[listName], obj, true).length > 0);
            }
        });
        return (count === 0) || result;
    };

    return function(input, definition) {
        var result = [];

        if (angular.isArray(input) && angular.isObject(definition)) {
            angular.forEach(input, function(item) {
                var matched = null;
                angular.forEach(definition, function(checklist, listName) {
                    var tmp;
                    if (listName !== 'colours') {
                        tmp = helper(checklist, item, listName, 'title');
                    } else{
                        tmp = helper(checklist, item, listName, 'name');
                    }
                    matched = (matched === null) ? tmp : matched && tmp;
                });
                if (matched) result.push(item);
            });
        }
        return result;
    };
});

一些注意事項：

• 如何使用： ng-repeat="product in products | productFilter:search" 。
• 過濾器僅進行一些基本檢查： input必須是數組， definition必須是對象。 如果您需要更多，可以在那做。
• 我會說*.name是該規則的一個例外（我假設大多數條件都是由*.title定義的）。 因此，我們在if/else 。
• helper函數中的count變量用於跟蹤特定標准組中經過了多少個選中的復選框。 如果不進行任何操作，則意味着整個條件組都處於非活動狀態 ，而我們只返回true 。
• 創建一個不會改變其外部其他對象狀態的filter是一個很好的設計。 這就是為什么使用count優於調用cleanObj() 。 在設計供團隊中其他開發人員使用的通用組件時，這一點尤為重要：您希望盡可能減少意外的因素。