ng-if with multiple conditions inside ng-repeat not working as expected

Question

I'm having trouble with something that is supposed to work unless I'm mistaken.

I've got a key:value object set up like this:

{
  key1:"val1",
  key2:"val2",
  key3:"val3",
  key4:null
}

In my view I have this:

<div class="col-md-4" ng-repeat="(key, value) in list" ng-if="key != 'key1' || value != null">
            <ul>
                <li>{{ key }} : {{ value }} </li>
            </ul>
        </div>

The problem: If I only use key != 'key1' works,, the key and value of key1 is not displayed.

If I only use value != null works as well,, key4 is not displayed.

But when I combine the if statement with || (OR), the entire if statement is ignored.

Am I doing something wrong here?

I've posted an example over here: http://jsfiddle.net/caxoyud2/

Thanx in advance!

Answer 1

If you want both to disappear it should be '&&' instead of '||'. !(key == 'key1' || value == null), when negation is taken inside '||' becomes '&&'.

<div class="col-md-4" ng-repeat="(key, value) in list" ng-if="key != 'key1' &&     value != null">
        <ul>
            <li>{{ key }} : {{ value }} </li>
        </ul>
</div>    

OR

<div class="col-md-4" ng-repeat="(key, value) in list" ng-if="!(key == 'key1' || value == null)">
    <ul>
        <li>{{ key }} : {{ value }}</li>
    </ul>
</div>