Angular material md-select-header问题

时间:2017-06-08 10:28:50

标签: angularjs angular-material

我有以下代码

<md-select class="" name="partners" ng-model="obj.con" data-md-container-class="selectdemoSelectHeader"
ng-disabled="notEditable('partners')">
    <md-select-header class="demo-select-header">
        <input ng-model="mdSelectHeader.searchTerm1" type="search" placeholder="{{'SEARCH' | T}}" class="demo-header-searchbox md-text">
    </md-select-header>
    <md-option ng-repeat="z in _.find(partnerContactList, { 'id': obj.par*1 }).contacts | filter:mdSelectHeader.searchTerm1" value="{{z.name}}">{{z.name}} ({{z.phone}},{{z.email}})</md-option>
</md-select>

我不知道为什么无法输入任何东西。

如果动态呈现控件,则同一页面中的另一个代码可以正常工作。

例如,如果我使用ng-if或ng-repeat动态渲染控件,则输入字段不能键入任何内容,否则可能会起作用。

有人修好了吗?

感谢。

1 个答案:

答案 0 :(得分:7)

我认为这是角度材料库的一个已知问题。但是,通过使用带有角度内置keydown的$event.stopPropagation(),此discussion中还有一种解决方法。

<md-select class="" name="partners" ng-model="obj.con" data-md-container-class="selectdemoSelectHeader"
ng-disabled="notEditable('partners')">
    <md-select-header class="demo-select-header">
        <input ng-model="mdSelectHeader.searchTerm1" type="search" placeholder="{{'SEARCH' | T}}" class="demo-header-searchbox md-text" ng-keydown="$event.stopPropagation()">
    </md-select-header>
    <md-option ng-repeat="z in _.find(partnerContactList, { 'id': obj.par*1 }).contacts | filter:mdSelectHeader.searchTerm1" value="{{z.name}}">{{z.name}} ({{z.phone}},{{z.email}})</md-option>
</md-select>

这是一个有效的sample