AngularJS条件ng-disabled不能重新启用
给定一个使用ng-disabled="truthy_scope_variable"
的有条件禁用的文本input字段,AngularJS在范围variables第一次被伪造时禁用该字段,但是在随后的变化中不启用它。 因此,该领域仍然残疾。 我只能假设出了问题,但是控制台日志是空的。
truthy范围variables绑定到一个单选button模型,我甚$watch
可以$watch
它的变化,但input字段的ng-disabled
没有按预期工作。 我已经手动尝试调用$apply
,但它看起来像Angular触发DOM更改。
在控制器中:
$scope.new_account = true
单选button:
<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字段:
<input type="password" ng-disabled="new_account" id="login-password" name="password" ng-model="password" />
如果我最初设置$scope.new_account = false
,该字段呈现禁用,但从来没有重新启用。 为什么发生这种情况?
有一个可供select的解决scheme可供使用
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" />
这是因为HTML属性总是string,所以在你的例子中,ngDisabled在两种情况下都计算string(“true”或“false”)。
为了补救,您应该将模型与ngDisabled中的string值进行比较:
ng-disabled="new_account == 'false'"
…或使用checkbox来获取实际的布尔值:
<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" />
这是一个两种解决scheme的PLNKR 。
截至2016年3月,绑定的值将更新Chrome和Firefox中的UI,即使在禁用ng的情况下为true,但在Safari中也不会。 在Safari中,当使用ng-disabled时,ui不会更新,虽然input元素value
属性将具有更新的值(更改后检查element.value
)。
在Safari中强制使用ng-model
或ng-value
指令进行ui更新,您必须使用ng-readonly而不是ng-disabled。