Menu
Given a conditionally disabled text input field using ng-disabled="truthy_scope_variable", AngularJS disables the field the first time the scope variable is falsified, but does not enable it on subsequent changes. As a result, the field remains disabled. I can only assume something went wrong, but the Console log is empty.
The truthy scope variable is tied to a radio button model and I can even $watch it change, but the input field's ng-disabled is not working as expected. I have manually tried calling $apply, but it looks like Angular is triggering DOM changes.
$scope.new_account = true <input type="radio" ng-model="new_account" name="register" id="radio_new_account" value="true" /> <input type="radio" ng-model="new_account" name="register" id="radio_existing_account" value="false" /> <input type="password" ng-disabled="new_account" id="login-password" name="password" ng-model="password" /> If I initially set $scope.new_account = false, the field is rendered disabled, but never re-enabled. Why is this happening?
316
Or you can use ng-disabled="condition1 || condition2" , is depend of you logic conditional.
The 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 .
Inside the function, the value of the IsDisabled variable is reversed i.e. if it is true then it set to false and vice versa. This makes the HTML TextBox enabled or disabled when the CheckBox is clicked i.e. checked – unchecked or selected – unselected. //This will disable the TextBox by default.
The ng-disabled Directive in AngularJS is used to enable or disable 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 form field (input, select, button, etc).
That's because HTML attributes are always strings, so in your example ngDisabled is evaluating a string in both cases ("true" or "false").
To remedy, you should compare the model against the string value in ngDisabled:
ng-disabled="new_account == 'false'" ... or use a checkbox, to get the actual boolean value:
<input type="checkbox" ng-model="existing_account" name="register" id="checkbox_new_account" /> <label for="checkbox_new_account">Is Existing Account</label> Password: <input type="password" ng-disabled="existing_account" name="password" ng-model="password" /> Here's a PLNKR with both solutions.
117
There is an alternative solution available just use
ng-value
<input type="radio" ng-model="new_account" name="register" id="radio_new_account" ng-value="true" /> <input type="radio" ng-model="new_account" name="register" id="radio_existing_account" ng-value="false" /> <input type="password" ng-disabled="new_account" id="login-password" name="password" ng-model="password" /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
