How do I add multiple conditions to "ng-disabled"?

Question

I need to check that two conditions are both true before enabling a button:

Here is an example:

<button type="submit" ng-disabled="frmUser.pw2.$error.pwMatch" class="btn btn-primary" ng-click="ChangePassword()">Change</button>

This example only contains one condition within ng-disabled. How would I add another such as a scope variable?

Solution 1

You should be able to && the conditions:

ng-disabled="condition1 && condition2"

Solution 2

Wanny is correct. The && operator doesn't work in HTML. With Angular, you must use the double pipes (||)for multiple conditions.

Solution 3

There is maybe a bit of a gotcha in the phrasing of the original question:

I need to check that two conditions are both true before enabling a button

The first thing to remember that the ng-disabled directive is evaluating a condition under which the button should be, well, disabled, but the original question is referring to the conditions under which it should en enabled. It will be enabled under any circumstances where the ng-disabled expression is not "truthy".

So, the first consideration is how to rephrase the logic of the question to be closer to the logical requirements of ng-disabled. The logical inverse of checking that two conditions are true in order to enable a button is that if either condition is false then the button should be disabled.

Thus, in the case of the original question, the pseudo-expression for ng-disabled is "disable the button if condition1 is false or condition2 is false". Translating into the Javascript-like code snippet required by Angular (https://docs.angularjs.org/guide/expression), we get:

!condition1 || !condition2

Zoomlar has it right!

Solution 4

Make sure you wrap the condition in the correct precedence

ng-disabled="((!product.img) || (!product.name))"

Solution 5

Actually the ng-disabled directive works with the " || " logical operator for me. The " && " evaluate only one condition.

http://jsbin.com/kuqilejesi/2/edit?html,js,output

View more solutions

Comments

[Matt Cashatt]

Why the down-vote and movement to close?

[Matt Cashatt]

@scrowler-- So, you are saying that AngularJS won't have a problem with me making the same declaration twice in the same element? Maybe my understanding of HTML isn't the problem.

[Matt Cashatt]

Thanks--I am new to Angular and was enclosing the expression in braces.

[Wanny Miarelli]

Can you please motivate the down vote. Just to let me know where is my mistake.

[Reto]

well, this answer is not correct. && means logical AND, || means logical OR. So if both your conditions need te be true for the control to be disabled use &&. If one or both need to be true, use ||.

[Wanny Miarelli]

@Reto can you please take a look to my jsbin ?Using the operator && AND the button is enabled with only 1 condition. Using the || OR the button is enabled only when both conditions are true.

[Reto]

Even though I did not downvote you, I understand the reason: Your answer is plain wrong: "the ng-disabled directive" works with any expression and will disable the control when the expression evaluates to truthy. Whether || or && is a totally different question (logical OR vs AND)

[Reto]

I looked at your jsbin. I think you are confusing yourself with all those "NOT" !. It works as expected. Try not to use double negation, then all those logical expressions suddenly make a lot more sense and you (and anybody else) can understand your code much easier: instead of !$vaild use $invalid, instead of !items.length write items.length > 0.

[Wanny Miarelli]

Maybe you are right, this is the new bin, output.jsbin.com/rovimesuso/1 ( there are no ! this time ).

[Wanny Miarelli]

Got it, thanks. Just wanted to share the fact that the && operator has a strange behavior with the ng-directive.

[Reto]

sorry, there is absolutly no "strange behaviour" - it is behaving exactly like the JS && operator: a logical AND operator, that only evaluates the second argument if it is needed to determine that final result. E.g. "a && b" -> if a is false you don't need to evaluate b, the result is anyway "false"

[Wanny Miarelli]

Yes ( look at my answer : " The " && " evaluate only one condition. " , and this is why the && operator is not the right solution if you need to check for multiple conditions in order to enable / disable the button.

[Wanny Miarelli]

This is another well made answer stackoverflow.com/questions/18261685/…

[Admin]

Or you can use ng-disabled="condition1 || condition2" , is depend of you logic conditional.

[Sámal Rasmussen]

How come so many people have upvoted this incorrect answer? && works fine in Angular expressions.

[Sámal Rasmussen]

@WannyMiarelli You seem to be mixing several incomplete ideas about what you want to demonstrate in your updated jsbin example. I am not able to make sense of it. What I can say is that && works perfectly well as a logical AND operator, and if you change the value of $scope.f to true, then you will see that it triggers ng-disabled, just like it should when it is provided with two true values.

[Wanny Miarelli]

@Sammi if you switch the $scope.t to true and $scope.f to false ( 1 true and 1 false ) you will be able to click the button ( using the && operator ). To disable the button until both are true you have to use the logical operator " || ". The OP wants to enable the button ONLY if BOTH are true.

[Sámal Rasmussen]

@WannyMiarelli Yes the OP actually wants a ||, as other answers have pointed out, but this answer that we are discussing isn't about that. It is wrongly stating that && doesn't work, when in fact it does. && does exactly what it is supposed to do. && means logical AND, and will trigger ng-disabled when both variables are true. || means logical OR, and will trigger it when either is true.

[Wanny Miarelli]

@Sammi the answer is not written by me. I just pointed out ( as you can see ) that in this specific case && is not the right choice. That's all.

[Michael Sorens]

Well-stated analysis of the question--your answer will definitely be useful to others who land on this page.