如何使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
  }
});

- Alon

Answer 1

除了指令之外的任何地方，包括属性检查在内，都不应该操纵DOM。您可以向作用域中添加一些值，指示是否禁用链接。

但是ngDisabled除了表单控件以外的任何东西都不能使用，因此您不能将其与<a>一起使用，但是您可以将其与<button>一起使用，并将其样式设置为链接。

另一种方法是使用表达式的惰性评估，例如isDisabled || action()，因此如果isDisabled为true，则不会调用action。

以下是两种解决方案：http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

- Valentyn Shybanov

---

总之，ng-click="isDisabled || action()" 做到了效果。 - Alon

建议使用 && 替换 ||，虽然在你的示例中 || 可以正常工作，但如果 isDisabled 是一个方法，双竖杠会持续检查有效表达式，而这不适用于 &&。 - polyclick

如果 isDisabled 返回 true，则 action() 将被调用，这时逻辑也会相应地改变。 - UCJava

@polyclick：但重点是__不要__继续检查是否禁用。此外，在您的版本中，如果isDisabled()返回false，则action()也不会被调用，也不会继续检查“有效表达式”。 - Sebastian Mach

@UCJava，如果使用&&，则为!isDisabled（或isEnabled）。它可以是ng-click="Form.$valid && action()"或ng-click="Form.$invalid || action()"。 - Weihui Guo

Answer 2

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

HTML：

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

- Rubi saini

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正常工作。

- Nick Res

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>

- Beginner

Answer 5

我之前也遇到过这个问题，后来发现只需要把 "#" 删掉就可以解决了。像这样：

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

- pollux1er

---

不应使用 href，而应改用 ng-href。 - Felipe Alarcon

ng-href 只在需要动态计算路径时才是必须的。如果路径从不改变，使用 href 就可以了。 - Ravvy

Answer 6

你可以尝试使用 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
}

- zx1986