La direttiva AngularJS ng-disabled con espressione non funziona

User story: quando un nuovo utente fa clic sulla casella Nuovo utente e accetta il pulsante di opzione Termini e condizioni, il pulsante Registra deve essere abilitato.La direttiva AngularJS ng-disabled con espressione non funziona

Il mio codice in angularJS non funziona. Il pulsante Registra rimane disabilitato. Ti stai chiedendo cosa è andato storto?

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

fonte

2013-12-11 karthiks

L'espressione ng-disabled viene valutata nel presente ambito. Quindi, si dovrebbe solo bisogno di quanto segue senza alcuna interpolazione in più con {{..}}:

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

Si noti che ho aggiunto un ! dato che probabilmente vuole il pulsante disattivato se l'utente ha non accettato il TNC.

demo di lavoro: http://plnkr.co/edit/95UiO4Rd2IMh8T1KjSQK?p=preview

Un commento è stato pubblicato di seguito chiedendo come ragionare su quando utilizzare {{...}} e quando utilizzare l'espressione nuda ad una direttiva ng-*. Sfortunatamente, non vi è alcun indizio sintattico nascosto nelle direttive in grado di rivelare tali informazioni. Guardando a the documentation diventerà il modo più veloce per scoprire queste informazioni.

fonte

2013-12-11 12:10:41

che dire, se la variabile booleana utilizzata in ng-disabile è portata genitore, non funzionerà è? –

@KuganKumar Lo farà a meno che non ci sia una direttiva sul campo "isolata" in mezzo. I valori definiti sull'ambito (pur essendo letti, almeno) sono ereditati senza problemi da qualsiasi ambito figlio. –

-11

Ho provato a prendere l'aiuto dalla soluzione di cui sopra ma non ha funzionato. Quindi ho trovato un'altra soluzione. Aggiungendo il seguente codice nel CSS per quell'elemento, risolve il mio problema pointer-events: none;

Quindi, in generale: -

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

fonte

2015-02-20 16:26:32

Questo va contro il concetto di ng-disabled che offre questo molto meglio per te. –

La direttiva AngularJS ng-disabled con espressione non funziona

risposta

Problemi correlati