问题描述

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

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

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

如何使用该类在 HTML 中进行条件，

或者有一种方法可以在 javascript 中做到这一点：

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

最佳解决方案

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

但是另一个问题是，ngDisabled 不适用于除表单控件之外的任何内容，因此您无法使用< a>，但您可以使用< button> 并将其作为链接。

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

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

次佳解决方案

我们可以有条件地添加 ng-click 事件，而不使用 disabled 类。

HTML：

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

第三种解决方案

我使用&&& 对我来说完美的表达。

例如，

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

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。