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?
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.