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

Question

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

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

但是有一个问题。输入字段不能用鼠标聚焦，单选按钮是 selected，我需要按 TAB 来聚焦输入字段。当我这样做并更改值时，单选按钮未被selected。然后，当我再次按下第 4 个单选按钮时，会报告正确的值。

我希望此输入可通过鼠标聚焦，并且在修改输入时单选按钮保持 selected。 Angular Material是否有可能实现这样的设计？

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;
}

已修改 fiddle：http://jsfiddle.net/langdonx/p55sx0zy/1/

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

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

How to use input field as custom entry in <md-radio-group>?

javascript

angularjs

angular-material