如何基于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/