如何使用AngularJS過濾JSON數據？

Question

我有三個dropdown盒子。我需要過濾數據，並根據我的複選框選擇（需要使用single checkbox或two checkboxes或three checkboxes）顯示在表格中。

我已經做了以下，但如果我們清楚地觀察它，我不能夠使用AngularJS正確地過濾數據。

贊：

a。它應該爲individual checkbox selection工作：是指如果我選擇任何single checkbox無論是從Name或Description或Field4，那麼相應的匹配濾波的數據應顯示在表中，否則它不應該顯示任何數據（即如果它不符合我們的複選框選擇意味着它不會顯示任何數據）

b。它應爲multiple(two) checkbox selection工作：一裝置，如果我選擇任何多個複選框等任一one from Nameone from Description和orone from Description和one from Field4orone from Field4和one from Name，然後各自匹配濾波的數據應被顯示在表中，否則不應該顯示任何數據（即如果它不符合我們的複選框選擇意味着它不會顯示任何數據）

c。它應該multiple(three) checkbox selection工作：也就是說，如果我選擇了三個複選框像one from Name和one from Description和one from Field4，那麼相應的匹配濾波的數據應顯示在表中，否則它不應該顯示任何數據（即如果它不符合我們的複選框的選擇意味着它不會顯示任何數據）

據首次僅checkbox選擇工作正常，是指：裝載上述代碼/應用程序，之後如果我們check上述任一選擇中的任何一個（例如是否single checkbox選擇或two checkbox選擇或three checkbox選擇），那麼它的正常工作，以後它不工作（也就是說，如果我們uncheck上述任何條件，然後，如果我們選擇任何checkbox再次它不工作，爲此，我們需要刷新應用程序/代碼，然後只有它的工作）。

示例：如果我從名稱中選擇一個，則會顯示各自匹配的數據。然後再次，如果我uncheck相同和checksome other checkbox像Description那麼它不起作用。同樣適用於所有上述標準。清楚你可以observe。

請讓我知道我在這裏做錯了什麼，讓我知道如何正確地過濾它。創建了Fiddle。提前致謝 ！

Answer 1

問題是複雜的過濾邏輯。無論何時您發現自己嵌套大量if陳述，請考慮重新組織分支邏輯。通過將其分解爲更小的組件，可以使其更易於管理，並且如果可以完全避免使用if，則只需測試一條路徑而不是幾條路徑。

每次用戶選中一個框，我們都需要確保只顯示與匹配多個框的項目相匹配的項目。所以我們需要知道1）有多少箱子被檢查，n，以及2）可以找到多少物品與n匹配的字段。

我們可以利用布爾變量可以轉換爲整數（0 = false，true = 1）的事實，並用它來計算檢查框的數量以及找到的匹配數量。

我們也可以將字段名放入數組中，這樣我們的函數中就不會有太多的重複。

Fiddle example here。

var fields = ["name", "description", "field4"]; 

//for each field, count how many fields the item matches 
function getMatches(item, matchesNeeded) { 
    var foundMatches = 0; 
    fields.forEach(field => { 
     foundMatches += item[field] === $scope.pagedItems[field] 
    }); 

    //make sure found at least one match and found desired minimum 
    return foundMatches && foundMatches >= matchesNeeded; 
} 

//count how many boxes are checked 
//this will tell us how many different fields we are matching on 
function numChecked() { 
    var count = 0; 
    fields.forEach(field => { 
     //this will auto convert falsy to 0. 
     //truthy values will be 1 
     count += Boolean($scope.pagedItems[field]); 
    }); 
    return count; 
} 

$scope.filterItems = function(item) { 
    return getMatches(item, numChecked()); 
}; 

Answer 2

正如@Larry指出的那樣，它更基於邏輯。我已經修改了Apress的書'Pro AngularJS'Source Code from GIT。

基本邏輯將在如下濾波函數 -

$scope.categoryFilterFn = function (product) { 
    var canHave = false;//dont load by default 
    var atLeastOneTrue = false;//Check if previously checked any condition 
    angular.forEach(filterValues, function(selectedValue, key) { 
     var selectVals = Object.values(selectedValue); 
      if(selectVals.indexOf(product[key]) !== -1) {//if values exits in product. 
       canHave = !atLeastOneTrue ? true : canHave; 
      }else{ 
       canHave = false; 
      } 
      atLeastOneTrue = true; 
    }); 
    return canHave; 
} 

對於working Fiddle。