web-dev-qa-db-ja.com

式を持つAngularJS ng-disabledディレクティブが機能していません

ユーザーストーリー：新規ユーザーが[新規ユーザー]チェックボックスをクリックして、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>
angularjsangularjs-directiveangularjs-scope
24
karthiks

ng-disabled式は、現在のスコープで評価されます。したがって、{{..}}を使用した追加の補間なしで、次のもののみが必要です。

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

ユーザーがTnCを受け入れたnot場合はおそらくボタンを無効にしたいので、!を追加したことに注意してください。

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

{{...}}をいつ使用するか、およびng-*ディレクティブで裸の式をいつ使用するかについての理由を尋ねるコメントが以下に投稿されました。残念ながら、その情報を明らかにすることができるディレクティブには構文上の手がかりが隠されていません。 ドキュメント を見ると、この情報を見つけるための最速の方法であることがわかります。

45
musically_ut
if ($scope.Data.length > 0)
  $scope.isNewUser = true;
else $scope.isNewUser = false;

<md-button class="md-raised md-primary" 
            ng-click="Search()" 
            ng-disabled="!isNewUser" 
            aria-label="pause">Assign </md-button>
0
Deepika chalana