AngularJSを使用してJSONデータをフィルタリングする方法は？

Question

私は3つのdropdownボックスを持っています。データをフィルタリングし、チェックボックスの選択（single checkboxまたはtwo checkboxesまたはthree checkboxesのいずれか）に基づいてテーブルに表示する必要があります。

私は以下のことを行っていますが、明確に観察すると、AngularJSを使用してデータを正しくフィルタリングできません。

Like：

a。 individual checkbox selectionの場合：NameまたはDescriptionまたはField4からsingle checkboxを選択すると、一致したフィルタリングされたデータを表に表示する必要があります。そうでなければ、データが表示されません。チェックボックスを選択すると、データは表示されません）

b。それはmultiple(two) checkbox selectionのために働く必要があります。それ以外の場合は、すべてのデータを表示すべきではない、私はone from Nameとone from Descriptionorone from Descriptionとone from Field4orone from Field4とone from Nameのいずれかのような任意の複数のチェックボックスを選択した場合、その後、それぞれの一致したフィルタリングされたデータがテーブルに表示されるべきであることを意味する（すなわち一致しない場合、チェックボックスを選択するとデータは表示されません）

c。 multiple(three) checkbox selectionの場合：つまり、one from Nameとone from Descriptionとone from Field4の3つのチェックボックスを選択すると、一致したフィルタリングされたデータが表に表示されます。そうでなければ、データは表示されません。チェックボックスを選択するとデータが表示されないことを意味します）

checkboxの選択のみです。このコード/アプリを読み込んだ後、上記のいずれかの選択肢single checkboxを選択するかtwo checkboxを選択するかthree checkboxを選択してください）その後正常に動作していません。つまり、uncheck上記の基準を満たしていればcheckboxもう一度それは動作していない、それは再びアプリケーション/コードをリフレッシュする必要があり、それだけで動作している）。

例：名前から1つを選択すると、それぞれの一致するデータが表示されます。そして、もし私が同じuncheckと同じでchecksome other checkboxのような場合は、Descriptionのようにうまくいきません。上記のすべての基準についても同様です。それは明らかにobserveです。

私がここで間違っていたことを教えてください。それを正しくフィルタリングする方法を教えてください。作成されたFiddle。前もって感謝します ！

Answer 1

問題は、複雑なフィルタリングロジックです。 ifステートメントをたくさん入れ子にしているときはいつでも、分岐ロジックを再構成することを考えてください。小さなコンポーネントに分割することで、管理が容易になります。また、ifの使用を避けることができれば、複数のパスではなく1つのパスをテストするだけで済みます。

ユーザーがボックスをチェックするたびに、多くのボックスに一致するアイテムのみが表示されるようにする必要があります。だから、1）チェックボックスの数は、n、2）一致するフィールドにはnの項目がいくつあるかを知る必要があります。

ブール変数を整数にキャストして（0 =偽、真= 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を修正しました。

基本ロジックとして以下のフィルタ機能になります - working Fiddleについては

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

。