web-dev-qa-db-fra.com

La directive AngularJS ng-disabled avec l'expression ne fonctionne pas

User Story: lorsqu'un nouvel utilisateur clique sur la case Nouvel utilisateur et accepte le bouton radio TermsAndConditions, le bouton Enregistrer doit être activé.

Mon code dans angularJS ne fonctionne pas. Le bouton Enregistrer reste désactivé. Vous vous demandez ce qui a mal tourné?

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

Le ng-disabled expression est évaluée dans la portée actuelle. Par conséquent, vous ne devriez avoir besoin que des éléments suivants sans aucune interpolation supplémentaire avec {{..}}:

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

Notez que j'ai ajouté un ! puisque vous souhaitez probablement que le bouton soit désactivé si l'utilisateur n'a pas accepté le TnC.

Démo de travail: http://plnkr.co/edit/95UiO4Rd2IMh8T1KjSQK?p=preview

Un commentaire a été publié ci-dessous pour savoir comment raisonner quand utiliser {{...}} et quand utiliser une expression nue avec un ng-* directive. Malheureusement, aucun indice syntaxique caché dans les directives ne peut révéler cette information. En regardant la documentation se révélera être le moyen le plus rapide de trouver ces informations.

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