2013-12-11 15 views
22

ユーザストーリー:新規ユーザが[新規ユーザ]チェックボックスをクリックし、[TermsAndConditions]ラジオボタンを選択すると、[登録]ボタンが有効になります。式を含むAngularJS ng-disabledディレクティブが機能しない

angularJSのコードが機能しません。 Registerボタンは無効のままです。何が間違っていたのだろうか?

<!DOCTYPE html> 
<html ng-app> 
<head> 
    <script src="lib/angular/angular.min.js"></script> 
</head> 
<body> 

<div ng-controller="LoginCtrl"> 
    <div> 
     <label>New User?</label> 
     <input type="checkbox" ng-model="isNewUser"/> 
    </div> 

    <div ng-show="isNewUser"> 
     <label>Accept Terms and Conditions</label> 
     <input type="radio" value="yes" name="tnc" ng-model="tnc"/><label>Yes</label> 
     <input type="radio" value="no" name="tnc" ng-model="tnc" /><label>No</label> 
    </div> 

    <div> 
     <input type="submit" value="Login" ng-disabled="isNewUser" > 
     <input type="submit" value="Register" ng-show="isNewUser" ng-disabled="hasAcceptedTnC('{{tnc}}')"> 
    </div> 
</div> 
</body> 

<script language="JavaScript"> 
var LoginCtrl = function ($scope) { 
     $scope.isNewUser = false; 
     $scope.tnc = "no"; 

     $scope.hasAcceptedTnC = function(value) { 
      //alert(value); 
      return "yes"==value; 
     }; 
    } 
</script> 
</html> 

答えて

41

ng-disabled発現が本発明の範囲内で評価される。ユーザーがいないはTnCのを受け入れた場合、あなたはおそらく無効になっボタンをしたいので、私は!を追加

<input type="submit" 
      value="Register" 
      ng-show="isNewUser" 
      ng-disabled="!hasAcceptedTnC(tnc)"> 

注:したがって、あなただけ{{..}}で余分な補間をせずに、次の必要があるの。

の作業のデモ:http://plnkr.co/edit/95UiO4Rd2IMh8T1KjSQK?p=preview


はコメントは{{...}}とするとき与えられたng-*ディレクティブで裸の表現を使用する方法を使用するときについて推論する方法を尋ねるの下に投稿されました。残念なことに、その情報を明らかにすることができる指示に隠された構文上のヒントはありません。 the documentationを見ると、この情報を見つける最速の方法になります。

+0

NG-無効に使用されるブール変数は文句を言わない仕事はそれで、親スコープ内にある場合に意味ですか? –

+0

@KuganKumar間に '分離された'スコープのディレクティブがない限り、それはできます。スコープ上で定義された値(少なくとも読み取られている間)は、任意の子スコープにシームレスに継承されます。 –

-11

私は上記の解決策から助けを得ようとしましたが、機能しませんでした。だから私は別の解決策を見つけました。その要素のCSSに次のコードを追加することで、私の問題を解決します。 pointer-events:none;一般的にはそう

: -

element[disabled]{ 
    pointer-events: none; 
} 
+0

これはng-disabledのコンセプトに反するものです。 –

関連する問題