AngularJS条件ng-disabled不会重新启用

Question

给定使用ng-disabled="truthy_scope_variable"的有条件禁用的文本输入字段，AngularJS禁用第一次范围变量被伪造的字段，但在后续更改时不启用它。结果，该字段保持禁用状态。我只能假设出现了问题，但控制台日志是空的。

truthy范围变量与单选按钮模型绑定，我甚至可以$watch更改，但输入字段ng-disabled无法按预期工作。我已经手动尝试调用$apply，但看起来Angular正在触发DOM更改。

在控制器中：

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

如果我最初设置$scope.new_account = false，则该字段将被禁用，但永远不会重新启用。为什么会这样？

Answer 1

这是因为HTML属性总是字符串，因此在您的示例中，ngDisabled在两种情况下都在评估字符串（“true”或“false”）。

要解决此问题，您应该将模型与ngDisabled中的字符串值进行比较：

ng-disabled="new_account == 'false'"

...或使用复选框，获取实际的布尔值：

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

这是两个解决方案的PLNKR。

Answer 2

有一种替代解决方案可以使用

  

NG-值

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

Answer 3

截至2016年3月，绑定值将更新Chrome和Firefox中的ui，即使ng-disabled为true但在Safari中也不行。在Safari中使用ng-disabled时ui将不会更新，尽管输入元素value属性将具有更新的值（更改后检查element.value。）

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