Javascript 如何基于5个布尔值显示或隐藏元素？

我有一个页面，上面有可以拖动的项目。用户可以应用一些过滤器，仅根据特定条件显示项目

用户还可以在同一页面上看到存储各种项目的文件夹。用户可以单击文件夹查看其项目

我对基于过滤器显示或隐藏项目的逻辑有问题。另外，我正在使用AngularJS的ng class指令应用一个显示CSS类的项

例如，我想：

如果项目位于与项目不同的文件夹中，请始终隐藏该项目 当前查看的文件夹

否则：如果应用了“必须是星号”筛选器，并且该项为 明星，展示它。 或 如果应用了必须完整的过滤器，以及 项目标记为已完成，请显示它

如果必须使用星号且必须完整的过滤器， 如果物品既没有星号也不完整，请隐藏它

我尝试了几种不同的方法，例如：

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

CSS:

每个项目的JavaScript属性类似于以下内容：

{
    // various properties, and then...

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

我有一个服务，它将mustBe.starred和mustBe.complete更改为true或false，具体取决于用户是否单击复选框以应用必须为starred或必须为complete筛选器

长话短说，逻辑有缺陷，和/或每个项目模型的架构有缺陷。单击复选框应用过滤器可能会隐藏某个项目，该项目应在何时显示，等等

---

有什么想法吗？

我们来分析一下你的逻辑

如果项目位于与当前查看的文件夹不同的文件夹中，请始终隐藏该项目

item.isInCurrentFolder

如果不满足条件，我们甚至不会进一步测试

如果应用了“必须加星号”过滤器，并且项目已加星号，则显示该项目

换言之：如果我们不在乎主演，或者如果我们在乎而它是主演的

如果应用了“必须完成”筛选器，并且该项标记为“完成”，则显示它

应用同样的推理

!item.mustBe.complete || item.complete

组合逻辑

而且，每个单独的条件都必须满足

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

---

运行中的小演示：

ng类指令可能应该包含对象。这是一个拼写错误吗？@Frizi，是的，对不起，那是一个拼写错误。修复了它。使用指令并将条件逻辑放在指令中以便测试它可能更容易easier@charlieftl，说得好，现在可以这样做了。这很好，谢谢你的回答。但是，如果我同时单击“必须加星号”和“必须完整”过滤器，则如果项目未加星号且不完整，则不会显示该项目。然而，如果它是明星或完整的，我仍然想显示它，如果这是有意义的。@Josh它应该。真的&！真的| |真的&！真的| |真的是真的。你可能在另一个层面上有一个错误。这就是我现在看到的问题：一个项目必须加星号，而不是加星号，并且必须是完整的，并且是完整的。逻辑是这样的：真的&！真| |假&！真的。这会产生错误；因此，该项目将不会显示，即使它是完整的，但只是没有明星，如果这是有意义的。但是，我确实想展示这个特定的项目。@Josh设置这些值背后的逻辑是什么？这不是简单地在复选框上显示ng模型吗？@josh我做了一个小演示，展示了创建此类列表的逻辑和许多可能的方法之一。

!item.mustBe.complete || item.complete

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