如何为“ng-disabled”添加多个条件?

时间:2013-12-12 22:47:04

标签: angularjs angularjs-directive

在启用按钮之前,我需要检查两个条件两者为真:

以下是一个例子:

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

此示例仅包含ng-disabled中的一个条件。我如何添加另一个如范围变量?

8 个答案:

答案 0 :(得分:65)

您应该能够&&条件:

ng-disabled="condition1 && condition2"

答案 1 :(得分:21)

Wanny是对的。 &&运算符不适用于HTML。使用Angular时,必须对多个条件使用双管(||)。

答案 2 :(得分:14)

在原始问题的措辞中可能有一些问题:

  

我需要在启用按钮之前检查两个条件是否都为真

首先要记住,ng-disabled指令正在评估按钮应该在哪种条件下,禁用,但最初的问题是指它应该在什么条件下启用。它将在ng-disabled表达式不是&#34; truthy&#34;的任何情况下启用。

因此,首先考虑的是如何将问题的逻辑重新定义为更接近ng-disabled的逻辑要求。检查两个条件为真以启用按钮的逻辑反转是,如果 条件为 false ,则应禁用该按钮。

因此,在原始问题的情况下,ng-disabled的伪表达式是&#34;如果condition1为false condition2为false&#34;则禁用该按钮。转换为Angular(https://docs.angularjs.org/guide/expression)所需的类似Javascript的代码段,我们得到:

!condition1 || !条件2

Zoomlar没错!

答案 3 :(得分:9)

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

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

答案 4 :(得分:6)

实际上,ng-disabled指令适用于&#34; || &#34;我的逻辑运算符。 &#34; &安培;&安培; &#34;只评估一个条件。

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

答案 5 :(得分:0)

您可以尝试这样的事情。

<button class="button" ng-disabled="(!data.var1 && !data.var2) ? false : true">
</button>

对我来说很好。

答案 6 :(得分:0)

两个变量都必须为 false 才能禁用按钮:

<button class="button" ng-disabled="(!data.var1 && !data.var2) ? false : true">
</button>

答案 7 :(得分:-2)

这种方式对我有用

ng-disabled =“(user.Role.ID!= 1)&&(user.Role.ID!= 2)”