如何使 ng-click 事件有条件？

Posted 2023-03-05

【中文标题】如何使 ng-click 事件有条件？

【英文标题】：How to make an ng-click event conditional?

【发布时间】：2013-01-10 19:55:02

【问题描述】：

我在 ng-repeat 中有这段代码：

<a href="#" class="disabled" ng-click="doSomething(object)">Do something</a>

当按钮有class="disabled"时，如何使按钮被禁用？

或者有没有办法在javascript中做到这一点，看起来像：

$('.do-something-button').click(function()
  if (!$(this).hasClass('disabled')) 
    do something
  
);

【参考方案1】：

在指令之外的任何地方都不能使用 DOM（包括检查属性）进行操作。您可以在范围中添加一些值，指示是否应禁用链接。

但另一个问题是 ngDisabled 除了表单控件之外什么都不起作用，所以你不能将它与 一起使用，但你可以将它与 一起使用并将其设置为链接。

另一种方法是对 isDisabled || action() 这样的表达式使用惰性求值，因此如果 isDisabled 为真，则不会调用操作。

两种解决方案都在这里：http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

【讨论】：

因此得出结论：ng-click="isDisabled || action()" 成功了

更好：|| 应该是 &&，尽管它在您的 plunk 中有效，但如果 isDisabled 是一种方法，则双管道会继续检查有效表达式。 && 不是这种情况

@polyclick 逻辑也会随之改变。如果 isDisabled 返回 true，则将调用 action()。

@polyclick：但关键是不继续检查是否禁用。另外，在您的版本中，如果 isDisabled() 返回 false，则不会调用 action()，也不会继续检查“是否存在有效表达式”。

@UCJava，如果使用 && ，那么它将是 !isDisabled （或 isEnabled）。它是 ng-click="Form.$valid && action()" 或 ng-click="Form.$invalid || action()"

【参考方案2】：

我们可以在不使用禁用类的情况下有条件地添加 ng-click 事件。

html：

<div ng-repeat="object in objects">
<span ng-click="!object.status && disableIt(object)">object.value</span>
</div>

【参考方案3】：

我使用非常适合我的 && 表达式。

例如，

<button ng-model="vm.slideOneValid" ng-disabled="!vm.slideOneValid" ng-click="vm.slideOneValid && vm.nextSlide()" class="btn btn-light-green btn-medium pull-right">Next</button>

如果vm.slideOneValid 为假，则不触发表达式的第二部分。我知道这是将逻辑放入 DOM，但这是一种快速的肮脏方式，可以让 ng-disabled 和 ng-click 放置好。

只需记住将 ng-model 添加到元素以使 ng-disabled 工作。

【参考方案4】：

基本上ng-click 首先检查isDisabled 并根据它的值决定是否应该调用该函数。

<span ng-click="(isDisabled) || clicked()">Do something</span>

或者读作

<span ng-click="(if this value is true function clicked won't be called. and if it's false the clicked will be called) || clicked()">Do something</span>

【参考方案5】：

您可以尝试使用ng-class。 这是我的简单示例：http://plnkr.co/edit/wS3QkQ5dvHNdc6Lb8ZSF?p=preview

<div ng-repeat="object in objects">
  <span ng-class="'disabled': object.status" ng-click="disableIt(object)">
    object.value
  </span>
</div>

状态是对象的自定义属性，你可以随意命名。ng-class中的disabled是一个CSS类名，object.status应该是true或者false

您可以在函数disableIt 中更改每个对象的状态。 在您的控制器中，您可以这样做：

$scope.disableIt = function(obj) 
  obj.status = !obj.status

【参考方案6】：

我也遇到了这个问题，我只是发现如果您只是删除“#”，问题就会消失。像这样：

<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>

【讨论】：

href 不应使用，请改用ng-href。

@Felipe Alarcon ng-href 仅在需要动态计算路径时才需要。如果路径永远不会改变，href 很好。