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

Question

I have a page that has "items" on it that you can drag around. There are filters that the user can apply to only show an item based on a certain criteria.

There are also folders that the user can see on the same page where various items are stored. The user can click on a folder to view its items.

I am having trouble with the logic for showing or hiding items based on the filters. (Also, I am using AngularJS's ng-class directive to apply an "item-showing" CSS class).

For example, I want to:

Always hide the item if the item is in a different folder than the currently viewed folder.

Otherwise: If the "must be starred" filter is applied, and the item is starred, show it.
OR
If the "must be complete" filter is applied, and the item is marked as complete, show it.

If the "must be starred" and "must be complete" filters are applied, and the item is neither starred nor complete, hide it.

I've tried several different ways of doing this, such as:

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

Each item's JavaScript properties look similar to this:

{
    // various properties, and then...

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

I have a service that will change mustBe.starred and mustBe.complete to true or false , depending on whether the user clicks a checkbox to apply the "must be starred" or "must be complete" filters.

Long story short, the logic is flawed, and/or the architecture for each item model is flawed. Clicking the checkboxes to apply the filters might hide an item, when it should show it, etc.

Any ideas?

Answer 1

Let's break down your logic.

• Always hide the item if the item is in a different folder than the currently viewed folder

   item.isInCurrentFolder 

  If the condition is not met, we won't be even testing any further.

• If the "must be starred" filter is applied, and the item is starred, show it.

  Rephrased: If we don't care about starring, or if we care and it is starred

   !item.mustBe.starred || item.starred 

• If the "must be complete" filter is applied, and the item is marked as complete, show it.

  Apply the same reasoning

   !item.mustBe.complete || item.complete 

• Combine logic

  and them, as each individual condition must be met

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

Little demo in action: http://jsfiddle.net/vkQtp/