如何基於5個布爾值顯示或隱藏元素？

Question

我的頁面上有“項目”，您可以在頁面上拖動。 用戶可以應用某些過濾器以僅基於特定條件顯示項目。

用戶還可以在同一頁面上看到存儲各種項目的文件夾。 用戶可以單擊文件夾以查看其項目。

我在基於過濾器顯示或隱藏項目的邏輯上遇到麻煩。 （此外，我正在使用AngularJS的ng-class指令應用“顯示項目”的CSS類）。

例如，我要：

如果項目位於與當前查看的文件夾不同的文件夾中，則始終隱藏該項目。

否則：如果應用了“必須加星標”過濾器，並且該項目已加星標，請顯示它。
要么
如果應用了“必須完成”過濾器，並且該項目被標記為完成，則顯示它。

如果應用了“必須加注星標”和“必須加注星標”過濾器，並且該項目既未加注星標又未完成，則將其隱藏。

我嘗試了幾種不同的方法來做到這一點，例如：

class="item" ng-class="{'item-showing': item.isInCurrentFolder && ((item.mustBe.starred && item.starred) || (item.mustBe.complete && item.complete))}"

CSS：

.item {
    /* various styles */
    display: none;
}

.item-showing {
    display: block;
}

每個項目的JavaScript屬性看起來都與此類似：

{
    // various properties, and then...

    isInCurrentFolder: true,
    starred: true,
    complete: true,
    mustBe: {
        starred: false,
        complete: false
    }
}

我有一項服務，可以將mustBe.starred和mustBe.complete更改為true或false ，具體取決於用戶單擊復選框以應用“必須加星標”還是“必須完成”過濾器。

長話短說，邏輯有缺陷，和/或每個項目模型的體系結構都有缺陷。 單擊復選框以應用過濾器可能會隱藏項目，何時顯示項目等。

有任何想法嗎？

Answer 1

讓我們分解一下邏輯。

• 如果項目位於與當前查看的文件夾不同的文件夾中，則始終隱藏該項目

   item.isInCurrentFolder 

  如果不滿足條件，我們將不再進行任何測試。

• 如果應用了“必須加星標”過濾器，並且該項目已加星標，請顯示它。

  改寫： 如果我們不關心主演，或者我們關心並且已主演

   !item.mustBe.starred || item.starred 

• 如果應用了“必須完成”過濾器，並且該項目被標記為完成，則顯示它。

  應用相同的推理

   !item.mustBe.complete || item.complete 

• 結合邏輯

  和它們，因為必須滿足每個單獨的條件

   item.isInCurrentFolder && (!item.mustBe.starred || item.starred) && (!item.mustBe.complete || item.complete) 

實際操作中的小演示： http : //jsfiddle.net/vkQtp/