2013-12-11 12 views
22

Historia użytkownika: Gdy nowy użytkownik kliknie pole wyboru Nowy użytkownik i zaakceptuje przycisk WarunkiWarunki, przycisk Zarejestruj powinien być włączony.AngularJS ng-disabled dyrektywa z wyrażeniem nie działa

Mój kod w angularJS nie działa. Przycisk rejestru pozostaje wyłączony. Zastanawiasz się, co poszło nie tak?

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

Odpowiedz

41

Wyrażenie ng-disabled jest oceniane w bieżącym zakresie. Dlatego też, jeśli potrzebujesz tylko następujące bez dodatkowego interpolacji z {{..}}:

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

Zauważ, że dodałem ! ponieważ prawdopodobnie chcesz przycisk wyłączone, jeśli użytkownik ma nie akceptowane TNC.

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


Komentarz został wysłany poniżej pytając, jak się rozumieć, o kiedy używać {{...}} i kiedy używać gołe wyraz z danej dyrektywy ng-*. Niestety w dyrektywach nie ma ukrytej wskazówki, która może ujawnić tę informację. Patrząc na the documentation okaże się najszybszym sposobem, aby dowiedzieć się tej informacji.

+0

to znaczy, że jeśli zmienna logiczna stosowane w ng sprawnych w zakresie dominującej, przyzwyczajenie praca to jest? –

+0

@KuganKumar Zostanie to zrobione, chyba że pomiędzy nimi znajduje się dyrektywa 'isolated' scope. Wartości zdefiniowane w zakresie (przynajmniej podczas czytania) są dziedziczone bezproblemowo do dowolnego zakresu podrzędnego. –

-11

Próbowałem wziąć pomoc z powyższego rozwiązania, ale to nie zadziałało. Więc znalazłem inne rozwiązanie. Dodanie następującego kodu do CSS dla tego elementu rozwiązuje mój problem pointer-events: none;

Więc ogólnie: -

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

Jest to sprzeczne z ideą osoby niepełnosprawnej, która przekazuje to znacznie lepiej. –

Powiązane problemy