如何在<md-radio-group>中使用输入字段作为自定义条目？

Question

我正在尝试使用Angular Material创建一个表单,允许用户选择每页的项目数(从DB加载,或其他).我想让大多数流行的选择(例如10,20,All)始终可见并且只需单击鼠标即可访问,因此没有下拉列表或滑块.但是,我还希望用户可以通过输入字段自由指定自定义值(请参见下图).

我创建了以下JSFiddle:http://jsfiddle.net/p55sx0zy/

但是有一个问题.输入字段无法用鼠标聚焦,而是选择了单选按钮,我需要按下TAB以聚焦输入字段.当我这样做并更改值时,单选按钮将被取消选中.然后,当我再次按下第4个单选按钮时,会报告正确的值.

我希望这个输入可以用鼠标聚焦,单选按钮在输入被修改时保持选中状态.使用Angular材料可以实现这样的设计吗？

Answer 1

CSS阻止输入与之交互.

md-radio-button .md-label, .md-switch-thumb .md-label {
    ...
    pointer-events: none;
}

您可以覆盖样式:

HTML:

<md-radio-button ng-if="option.input" value="{{ctrl.perPageCustom}}" class="md-primary md-radio-interactive">
    <input ng-model="ctrl.perPageCustom" /> (Custom)
</md-radio-button>

CSS:

.md-radio-interactive input {
    pointer-events: all;
}

修改过的小提琴:http://jsfiddle.net/langdonx/p55sx0zy/1/

您必须改变自己存储自定义值的方式,以便收音机保持选中状态.