如何向“禁用ng”添加多个条件?

时间:2021-12-29 09:02:41

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?

此示例仅包含禁用ng的一个条件。如何添加另一个变量,比如范围变量?

5 个解决方案

#1


61  

You should be able to && the conditions:

你应该能够&& &条件:

ng-disabled="condition1 && condition2"

#2


19  

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

威尼是正确的。&&操作符不能在HTML中工作。对于有角的,你必须在多种情况下使用双管(||)。

#3


9  

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".

首先要记住的是,ng禁用指令是评估按钮应该被禁用的条件,但是最初的问题是指它应该被启用的条件。它将在任何情况下启用,在任何情况下,ng-禁用表达式都不是“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.

因此,首先要考虑的是如何重新表述问题的逻辑,使其更接近于禁用ng的逻辑需求。检查两个条件是否正确的逻辑逆是为了启用一个按钮,如果两个条件都是假的,那么按钮应该被禁用。

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:

因此,在原始问题的情况下,禁用ng的伪表达式是“如果condition1为假或condition2为假,则禁用按钮”。转换成角度(https://docs.angularjs.org/guide/expression)所需的javascript代码片段,我们得到:

!condition1 || !condition2

! condition1 | | ! condition2

Zoomlar has it right!

Zoomlar吧!

#4


8  

Make sure you wrap the condition in the correct precedence

确保您将条件包装在正确的优先级

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

#5


5  

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

实际上,ng禁用指令与“||”逻辑运算符一起工作。“&&”只评估一个条件。

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

http://jsbin.com/kuqilejesi/2/edit?html,js、输出

#1


61  

You should be able to && the conditions:

你应该能够&& &条件:

ng-disabled="condition1 && condition2"

#2


19  

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

威尼是正确的。&&操作符不能在HTML中工作。对于有角的,你必须在多种情况下使用双管(||)。

#3


9  

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".

首先要记住的是,ng禁用指令是评估按钮应该被禁用的条件,但是最初的问题是指它应该被启用的条件。它将在任何情况下启用,在任何情况下,ng-禁用表达式都不是“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.

因此,首先要考虑的是如何重新表述问题的逻辑,使其更接近于禁用ng的逻辑需求。检查两个条件是否正确的逻辑逆是为了启用一个按钮,如果两个条件都是假的,那么按钮应该被禁用。

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:

因此,在原始问题的情况下,禁用ng的伪表达式是“如果condition1为假或condition2为假,则禁用按钮”。转换成角度(https://docs.angularjs.org/guide/expression)所需的javascript代码片段,我们得到:

!condition1 || !condition2

! condition1 | | ! condition2

Zoomlar has it right!

Zoomlar吧!

#4


8  

Make sure you wrap the condition in the correct precedence

确保您将条件包装在正确的优先级

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

#5


5  

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

实际上,ng禁用指令与“||”逻辑运算符一起工作。“&&”只评估一个条件。

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

http://jsbin.com/kuqilejesi/2/edit?html,js、输出