有条件的ng禁用不会重新启用AngularJS

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.

给定一个条件禁用的文本输入字段，使用ng-disabled=“truthy_scope_variable”，AngularJS在第一次修改范围变量时禁用该字段，但在随后的更改中不启用该字段。因此，该字段仍然被禁用。我只能假设出了问题，但是控制台日志是空的。

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.

truthy的作用域变量绑定到单选按钮模型，我甚至可以$watch它更改，但是输入字段的ng禁用并不能正常工作。我已经手动尝试调用$apply，但是看起来是角触发了DOM的更改。

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?

如果我最初设置$scope。new_account = false，该字段被禁用，但从未重新启用。为什么会这样?

3 个解决方案

#1

There is an alternative solution available just use

有一种可供选择的解决方案

ng-value

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

#2

That's because HTML attributes are always strings, so in your example ngDisabled is evaluating a string in both cases ("true" or "false").

这是因为HTML属性总是字符串，所以在您的示例中，ngDisabled表示两种情况下的字符串(“true”或“false”)。

To remedy, you should compare the model against the string value in ngDisabled:

为了补救，您应该将模型与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.

这是一个同时有两个解的PLNKR。

#3

As of 2016 March the binded values will update the ui in Chrome and Firefox even when the ng-disabled is true but not in Safari. In Safari when you use ng-disabled the ui wont update although the input element value property will have the updated value (Check element.value after changing it.)

到2016年3月，绑定的值将在Chrome和Firefox中更新ui，即使禁用了ng，但在Safari中没有。在Safari中，当您使用禁用了ng的ui时，它不会更新，尽管输入元素值属性将具有更新的值(检查元素)。值后改变它。)

In Safari to force the ui updates with ng-model or ng-value directives you have to use ng-readonly instead of ng-disabled.

在Safari中，为了强制使用ng-model或ng-value指令进行ui更新，必须使用ng-readonly而不是禁用ng-。

#1