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

Question

我在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
  }
});

Answer 1

在除指令之外的任何地方使用DOM(包括检查属性)进行操作是不好的.您可以在范围中添加一些值,指示是否应禁用链接.

但其他问题是ngDisabled不能处理除表单控件之外的任何内容,因此您不能将它与<a>一起使用,但您可以将它与<button>一起使用并将其设置为链接.

另一种方法是使用表达式的惰性求值,isDisabled || action()如果isDisabled为真,则不会调用动作.

这里有两个解决方案:http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Answer 2

我们可以有条件地添加ng-click事件而不使用禁用的类.

HTML:

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

Answer 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为false,则不触发表达式的第二部分.我知道这会将逻辑放入DOM,但这是一种快速的方法,可以使用ng-disabled和ng-click来放置好.

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

Answer 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>