119

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

6 に答える 6

208

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

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

もう1つの方法は、次のような式の遅延評価を使用することです。isDisabled || action()そのため、trueの場合、アクションは呼び出されませんisDisabled。

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

于 2013-01-27T09:41:30.293 に答える
47

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

HTML：

<div ng-repeat="object in objects">
<span ng-click="!object.status && disableIt(object)">{{object.value}}</span>
</div>
于 2015-07-10T12:17:39.207 に答える
8

私は自分にぴったりの&&式を使用しています。

例えば、

<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.slideOneValidfalseの場合、式の2番目の部分は実行されません。これがロジックをDOMに組み込んでいることは知っていますが、これはng-disabledを取得し、ng-clickを実行して適切な場所に配置するための手っ取り早い汚い方法です。

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

于 2017-01-28T03:11:35.310 に答える
6

基本的に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>
于 2018-08-29T12:05:49.577 に答える
1

を使用してみることができます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>

ステータスはオブジェクトのカスタム属性であり、任意の名前を付けることができます。in
はCSSクラス名であり、またはdisabledng-classobject.statustruefalse

関数ですべてのオブジェクトのステータスを変更できますdisableIt。
コントローラでは、次のことができます。

$scope.disableIt = function(obj) {
  obj.status = !obj.status
}
于 2013-10-17T04:09:14.573 に答える
1

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

<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>
于 2015-11-03T14:06:19.440 に答える