Question

我有一个包含＆＃34;项目＆＃34;你可以拖着它。用户可以应用过滤器，仅根据特定条件显示项目。

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

我在显示或隐藏基于过滤器的项目时遇到问题。（另外，我使用AngularJS＆＃39; ng-class指令来应用＆＃34;项目显示＆＃34; CSS类。）

例如，我想：

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

否则：如果＆＃34;必须加星标＆＃34;应用过滤器，项目为   出演，演出。
  或
  如果＆＃34;必须完整＆＃34;应用过滤器，和   该项目标记为完成，显示它。

如果＆＃34;必须加星标＆＃34;并且＆＃34;必须完整＆＃34;过滤器应用，   并且该项目既不加星标也不完整，隐藏它。

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

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，具体取决于用户是否点击了复选框以应用＆＃34;必须加星标＆＃34;或者＆＃34;必须完整＆＃34;过滤器。

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

有什么想法吗？

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/

如何根据5个布尔值显示或隐藏元素？

1 个答案: