javascript - 如何在 中使用输入字段作为自定义条目？

Question

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

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

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

我希望此输入可通过鼠标聚焦，并且单选按钮在修改输入时保持选中状态。是否有可能使用 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/

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