javascript - AngularJS conditional ng-disabled does not re-enable

Question

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.

In controller:

$scope.new_account = true

Radio buttons:

<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" />

Conditionally disabled input field:

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

question from:https://stackoverflow.com/questions/17855304/angularjs-conditional-ng-disabled-does-not-re-enable

Answer 1

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" />