如何为用户自定义值实现可编辑的md-select？

Question

Angular Material 库中有一个 <md-select> 控件。它只允许列表中的 select 选项。但是，如果我想允许用户在此字段中写入自己的值怎么办？所以我想要可编辑的 md-select 允许从列表中选择值或写入自己的值。可能吗？

Answer 1

改用<md-autocomplete>。见 demo.

Answer 2

发现于 https://github.com/angular/material/issues/7970, so the credits go to icenold

<style>
    .combocontainer{
        width:200px;
        display:inline;
    }
    .comboinput {
        position:relative;
        top:-3px;
        left:-2.75em;
    }
    .comboinput div._md-text{
        display:none !important;
    }
    .comboinput md-select-value:not([disabled]):focus ._md-select-value{
        border-bottom:none;
    }
    .comboinput md-select-value{
        min-width: 0.0em;
        border-bottom:none !important;
    }
</style>

<div class="combocontainer">
    <md-input-container>
        <label>combobox1</label>
        <input type="text" ng-model="chosen"/>
    </md-input-container>
    <md-input-container class="comboinput">
        <md-select ng-model="chosen" md-container-class="combomenu">
            <md-option ng-value="'item 1'">item 1</md-option>
            <md-option ng-value="'item 2'">item 2</md-option>
            <md-option ng-value="'item 3'">item 3</md-option>
        </md-select>
    </md-input-container>
</div>
<div class="combocontainer">
    <md-input-container>
        <label>combobox2</label>
        <input type="text" ng-model="chosen2" />
    </md-input-container>
    <md-input-container class="comboinput">
        <md-select ng-model="chosen2" md-container-class="combomenu">
            <md-option ng-value="'item 1'">item 1</md-option>
            <md-option ng-value="'item 2'">item 2</md-option>
            <md-option ng-value="'item 3'">item 3</md-option>
        </md-select>
    </md-input-container>
</div>

如何为用户自定义值实现可编辑的md-select？

How to implement editable md-select for user's custom value?

javascript

angularjs

angular-material