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

Question

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

我创建了以下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/

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