如何在<md-radio-group>中使用输入字段作为自定义条目? [英] How to use input field as custom entry in <md-radio-group>?

问题描述

我正在尝试使用

解决方案

CSS 阻止输入交互.

md-radio-button .md-label, .md-switch-thumb .md-label {...指针事件:无；}

您可以覆盖样式:

HTML:

<input ng-model="ctrl.perPageCustom"/>(风俗)</md-radio-button>

CSS:

.md-radio-interactive input {指针事件:全部；}

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

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

I'm trying to create a form using Angular Material which allows user to select number of items per page (loaded from DB, or whatever). I want to have most popular choices (e.g. 10, 20, All) always visible and accessible with a single mouse click, so no drop-down list or slider. However I also want the user to have the freedom to specify custom value through an input field (see image below).

I created following JSFiddle: http://jsfiddle.net/p55sx0zy/

However there is a problem. Input field cannot be focused with mouse, instead radio button is selected and I need to press TAB to focus the input field. When I do that and change the value radio button gets unselected. Then when I press this 4th radio button again the proper value is reported.

I'd like this input to be focusable with mouse and the radio button to remain selected while input is being modified. Is it possible to achieve such design at all with Angular Material?

解决方案

CSS is preventing the input from being interacted with.

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

You can just override the style:

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

Modified fiddle: http://jsfiddle.net/langdonx/p55sx0zy/1/

You'll have to change you tack on how you're storing the custom value so the radio stays selected though.

这篇关于如何在<md-radio-group>中使用输入字段作为自定义条目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！