web-dev-qa-db-ja.com

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
  }
});
javascripthtmlangularjs
111
Alon

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

しかし、他の問題は、ngDisabledがフォームコントロール以外では機能しないため、<a>では使用できないが、<button>で使用してリンクとしてスタイル設定できることです。

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

両方のソリューションを紹介します： http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

200
Valentyn Shybanov

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

HTML：

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

完璧に機能する&&表現を使用しています。

例えば、

<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をクリックしてNiceを配置する簡単で汚い方法です。

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

6
Nick Res

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

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
}
1
zx1986

私もこの問題を抱えていましたが、単に「＃」を削除すると問題が解決することがわかりました。このような ：

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