無効なボタンのng-click = ""効果を防止する

Question

AngularJSが「無効」属性を持つHTMLボタンタグをクリックしないようにするにはどうすればよいですか？この場合

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<button type="button" disabled ng-click="something()">No Click Please!</button>

、（）何かを呼び出さないでください。

Answer 1

ngClickディレクティブで評価する必要がある式を渡します。 trueと評価されない場合、something()は呼び出されません。相続人は一例

：

(function() { 
 

 
    angular.module('MyApp', []) 
 
    .controller('MyController', MyController); 
 

 
    MyController.$inject = ["$scope"]; 
 

 
    function MyController($scope) { 
 

 
    $scope.disabled = true; 
 

 
    } 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div data-ng-app="MyApp"> 
 

 
    <div data-ng-controller="MyController"> 
 

 
    <button type="button" ng-disabled="disabled" ng-click="disabled && something()">No Click Please!</button> 
 

 
    <button type="button" data-ng-click="disabled = !disabled">{{disabled ? 'Enable' : 'Disable'}}</button> 
 

 
    </div> 
 

 
</div>

は$scope.disabledがtrueの場合、something()が呼び出されず、ボタンも無効になりますように、あなたもngDisabledディレクティブを使用することができます注意してください！

Answer 2

ng-disabledを使用します。

<md-button ng-disabled="true"> Disabled Button </md-button> 

EDIT ...

Fiddled

Answer 3

適切な方法は、角度およびそれを無効にするために、それを処理するために、スコープ変数を使用して、デフォルトのディレクティブである

をng-disabledを使用することですHTML：

<button ng-click="disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">No Click Please!</button> 

の

JS：papakiaの述べたように

$scope.isDisabled = false; 
    $scope.disableClick = function() { 
     alert("Clicked!"); 
     $scope.isDisabled = true; 
     return false; 
    } 

EDIT

それが実行され得ることはありませんように、ブール変数と関数を確認してください。

DEMO APP

Answer 4

このソリューションは、いずれかのAngularJSで動作し、使用したすべてのクリックターゲットブートストラップの.disabledクラスを使用してフォームの入力および/またはその他の要素についてdisabled属性を内蔵し、それがコントローラに追加することなく動作します。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<button type="button" disabled="disabled" data-ng-click="something($event)">No Click Please!</button> 

はJavaScript

function something($event) 
{ 
    var is_enabled = !angular.element($event.currentTarget).is('.disabled,:disabled'); 
    if(is_enabled) 
    { 
    } 
}