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

Question

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

truthy 范围变量绑定(bind)到单选按钮模型，我什至可以 $watch 它改变，但输入字段的 ng-disabled 没有按预期工作。我已手动尝试调用 $apply，但看起来 Angular 正在触发 DOM 更改。

在 Controller 中:

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

...或使用复选框，获取实际的 bool 值:

<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两种解决方案。