BinaryDevelop
  1. ホーム
  2. angularjs

[解決済み] AngularJS の ng-disabled ディレクティブに式を指定しても動作しない

2022-02-12 18:45:06

質問

ユーザーストーリー 新規ユーザーが「新規ユーザー」チェックボックスをクリックし、「TermsAndConditions」ラジオボタンに同意すると、「登録」ボタンが有効になるようにする必要があります。

angularJSの私のコードは動作しません。登録ボタンは無効のままです。何がいけなかったのでしょうか？ 

<!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>

解決方法は？

その ng-disabled 式は現在のスコープで評価される。従って、以下のように余計な補間をせずに {{..}} : 

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

を追加したことに注意してください。 ! がある場合、ボタンを無効にしたいでしょうから。 ではなく は、TnCを受け入れた。

動作デモの様子。 http://plnkr.co/edit/95UiO4Rd2IMh8T1KjSQK?p=preview

を使うタイミングをどのように推論するかというコメントが下に投稿されました。 {{...}} を指定し、その上で裸の式を使用する場合 ng-* ディレクティブを使用します。残念ながら、その情報を明らかにする構文的な手がかりは、指示文の中に隠されていません。ここで ドキュメント を使うのが一番手っ取り早いでしょう。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します