为什么在键入文本输入时无法选择单选按钮

时间:2015-02-17 13:50:19

标签: javascript html angularjs forms

在一个项目中,我需要一个表单来包含单选按钮,并将最后一个项目作为输入字段。我们正在使用AngularJS。

将vm.appModel.amount绑定到输入字段并且不同的单选按钮选项将起作用:单击提交按钮时使用的数据将有效。

但是,如果用户单击文本输入并开始键入,则即使在文本输入上有许多检查以使检查值设置为true,单选按钮也会丢失它的检查值。 (See code

ng-focus="isManualInputSelected = true;"
ng-change="isManualInputSelected = true;"
ng-click="isManualInputSelected = true;"

在收音机输入上,这应该保持激活,但不是。 (See code

ng-checked="isManualInputSelected"

请参阅回购:https://github.com/jansensan/test-angularjs-text-input-in-radio-group

有关如何确保在输入文本字段时确保选中单选按钮的任何指导将不胜感激。感谢。

2 个答案:

答案 0 :(得分:0)

您已将ng-model绑定到vm.appModel.amount属性 单选按钮的值为0 仅当vm.appModel.amount属性的值为0时,才会检查单选按钮 您已将文本框绑定到同一属性,因此当您开始键入时,将值更改为0以外的值,然后取消选中单选按钮 似乎没有必要将单选按钮绑定到具有ng-model的amount属性。只需删除它。

答案 1 :(得分:0)

为您创建了解决问题的拉取请求。

https://github.com/jansensan/test-angularjs-text-input-in-radio-group/pull/1

由于jw56578已经说过vm.appModel.amount属性被输入中的值添加,这意味着不再检查单选按钮。

我已经重构了您的代码,因此它包含一个包含属性金额和类型的付款对象。对于手动付款,现在将设置payment.type(这将控制单选按钮),金额将存储在payment.amount中。