CODEWITHSUNDEEP
javascriptangularjs
sch
sch

Reputation: 1388

ng click if true, resolves to true when false

I have a ng-click event on an <i> tag that looks like this:

ng-click="parent.Status != 'Open' || (item.Status='Retrospect')"

So if parent.Status is not equals to Open then item Status is set to Retrospect, this is ok.

But I want another check, I want to see if this item is editable, for this I have a bool variable, edit. Naturally I wrote it like this: 

ng-click="parent.Status != 'Open' && edit || (item.Status='Retrospect')"

So, I thought that if parent.Status is not equals to Open AND edit equals true my item.Status will be updated, problem is that it was updated no matter if edit was true or false (thinking it's because the first check is true, so it doesn't care about edit)

i also tried it like this, but same problem:

ng-click="(parent.Status != 'Open' && edit) || (item.Status='Retrospect')"

.. using ( )

What am I missing? Should this not be possible?

EDIT: Seems like when doing like this:

ng-click="parent.Status != 'Open' || (item.Status='Retrospect')"

item.Status will be set to 'Retrospect' if parent.Status != 'Open' resovles to false, but the problem still persist.

Also, there may be some confuison here I think, I am not checking if parent.Status != 'Open' OR item.Status='Retrospect' I am running the command item.Status='Retrospect' IF parent.Status != 'Open' equals false

My bad Okay, I am so confused right now, but my code did in fact work, the problem was my understanding of ng-click true/false evaluation and also I used != instead of !== which may have caused some issues.

I will upvote most of the answers (cause all of you were right, just not me) and accept what helped me to understand the most. Thanks all!

Upvotes: 0

Views: 1342

Answers (5)

Naitik Adani
Naitik Adani

Reputation: 236

Simply use ternary operator like this:

ng-click="parent.Status != 'Open' && edit = true? item.Status='Retrospect' : item.Status='Somethingelse or null'"

Upvotes: 0

Khyati
Khyati

Reputation: 231

Such statements are called as short circuit statements. but as per the rule for "||"

statement1 || statement2

in above, statement1 is always executed and evaluated, but statement2 is executed only if statement1 evaluates to false.

on contrary, the rule for "&&" is 

statement1 && statement2

in above, statement1 is always executed and evaluated, but statement2 is executed only if statement1 evaluates to true.

check the below in console - 

var parent = {};
parent.Status = "Close";
var edit = false;
var item = {};
item.Status = ""

parent.Status != 'Open' && edit || (item.Status='Retrospect');

item.Status;

the Status will be updated only when (parent.Status != 'Open' && edit) evaluates to false.

You can refer - http://sampsonblog.com/tag/short-circuit-evaluation

Hope this helps.

Upvotes: 3

MarcoS
MarcoS

Reputation: 17711

(item.Status='Retrospect') should be (item.Status === 'Retrospect') ...
Otherwise you are testing the return value of an assignment, which is always true... :-). As a side note, always use type-converting equality comparison (=== for == !== for != JavaScript)... (for a quite complete and clear explanation, see here).

Update: From your comment I see you really meant what you wrote... :-)
However, in that case, I'd do:

if (!(parent.Status !== 'Open' && edit)) item.Status = 'Retrospect'

or:

item.Status = (parent.Status !== 'Open' && edit) ? item.Status : 'Retrospect'

Upvotes: 1

Dinsdale
Dinsdale

Reputation: 184

I think you better expand the code in a function.

In Html:

ng-click="doThing()"

In the javascript:

doThing() {
    if((parent.Status != 'Open') && edit) {
        item.Status = 'Retrospect';
    }
}

Upvotes: 1

KWeiss
KWeiss

Reputation: 3144

In your || construct, item.Status will update if the first condition (parent.Status != 'Open' && edit) is false, not if it is true. Your first code should work the same way.
It may be cleaner and less confusing to write:

if (parent.Status != 'Open' && edit) {item.Status = 'Retrospect';}

Upvotes: 1

Related Questions