Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS ng-disabled directive with expression is not working

Tags:

User Story: When a new user clicks the New User checkbox and accepts the TermsAndConditions radio button, the Register button should be enabled.

My code in angularJS isn't working. The Register button remains disabled. Wondering what went wrong?

<!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> 
like image 791
karthiks Avatar asked Dec 11 '13 12:12

karthiks


People also ask

How to use ng-disabled in Angular?

Definition and UsageThe ng-disabled directive sets the disabled attribute of a form field (input, select, or textarea). The form field will be disabled if the expression inside the ng-disabled attribute returns true. The ng-disabled directive is necessary to be able to shift the value between true and false .

How to disable input in AngularJS?

The ng-disabled Directive in AngularJS is used to enable or disable the HTML elements. If the expression inside the ng-disabled attribute returns true then the form field will be disabled or vice versa. It is usually applied on the form field (i.e, input, select, button, etc).

How to disable a div in AngularJS?

-- enclosing a div within the fieldset and set ng-disabled to fieldset should work.

How do you write if condition in NG-disabled?

Or you can use ng-disabled="condition1 || condition2" , is depend of you logic conditional.


1 Answers

The ng-disabled expression is evaluated in the present scope. Hence, you should only need the following without any extra interpolation with {{..}}:

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

Note that I added a ! since you probably want the button disabled if the user has not accepted the TnC.

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


A comment was posted below asking how to reason about when to use {{...}} and when to use bare expression with a given ng-* directive. Unfortunately, there is no syntactical clue hidden in the directives which can reveal that information. Looking at the documentation will turn out to be fastest way to find out this information.

like image 130
musically_ut Avatar answered Sep 28 '22 05:09

musically_ut