私はこのコードを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>で使用してリンクとしてスタイル設定できることです。
別の方法は、isDisabled || action()
のような式の遅延評価を使用して、isDisabled
がtrueの場合にアクションが呼び出されないようにすることです。
両方のソリューションを紹介します: 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をクリックしてNiceを配置する簡単で汚い方法です。
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>
ステータスはオブジェクトのカスタム属性であり、任意の名前を付けることができます。ng-class
のdisabled
はCSSクラス名です。object.status
はtrue
またはfalse
でなければなりません
関数disableIt
ですべてのオブジェクトのステータスを変更できます。
コントローラーで、次のことができます。
$scope.disableIt = function(obj) {
obj.status = !obj.status
}
私もこの問題を抱えていましたが、単に「#」を削除すると問題が解決することがわかりました。このような :
<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>