ng-clickイベントを条件付きにする方法は？

私は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
  }
});

ディレクティブ以外の場所でDOMを操作する（属性のチェックを含む）ことはよくありません。リンクを無効にするかどうかを示す値をスコープに追加できます。

ただし、ngDisabledはフォームコントロール以外では機能しないため、<a>では使用できませんが、<button>で使用してリンクとしてスタイル設定できるという問題もあります。

もう1つの方法は、式の遅延評価を使用して、trueのisDisabled || action()場合にアクションが呼び出されないようにすることisDisabledです。

ここに両方の​​ソリューションがあります：http : //plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

無効なクラスを使用せずに、条件付きでng-clickイベントを追加できます。

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の場合、式の2番目の部分は実行されません。私はこれがDOMにロジックを入れていることを知っていますが、ngを無効にしてng-clickを適切に配置するための簡単な方法です。

ng-modelを要素に追加して、ng-disabledを機能させることを忘れないでください。

基本的には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>

あなたが使用しようとすることができます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>

ステータスはオブジェクトのカスタム属性であり、好きな名前を付けることができます。中には、CSSクラス名でなければなりませんか
disabledng-classobject.statustruefalse

functionですべてのオブジェクトのステータスを変更できますdisableIt。
あなたのコントローラーでは、これを行うことができます：

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

私にもこの問題があり、単に「＃」を削除すると問題が発生することがわかりました。このような ：

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