問題描述

我在 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。