角度材料选项卡和自动完成

时间:2015-12-17 00:32:16

标签: javascript angularjs autocomplete tabs angular-material

我在我的html页面使用md-tab,在每个标签中我使用自动完成组件,如下所示:

<md-autocomplete                        
            md-selected-item="selectedItem"
            md-search-text-change="searchTextChange(searchText)"
            md-search-text="searchText"
            md-selected-item-change="selectedItemChange(item)"
            md-items="item in querySearch(searchText) | orderBy:'text'"
            md-item-text="item.text"
            md-min-length="0"
            placeholder="Easy filter"
            md-menu-class="autocomplete-custom-template">
            <md-item-template style="background-color:white;">
                <span class="select-title">
                    <span class="item-tags"> {{item.text}} </span>
                </span>
            </md-item-template>
        </md-autocomplete>

我在所有标签中使用相同的代码。问题是:当我点击自动完成组件时,我得到两个列表:一个在我的自动完成框下(这是正常的),一个在左侧,这是另一个选项卡中另一个自动完成框的列表

为什么要显示?有解决办法吗?

1 个答案:

答案 0 :(得分:0)

我尝试使用Angular 1.3.0和Angular-Material 0.11.4重现并且工作正常。

您可以尝试在每个md-autocomplete中输入md-input-id =“theInputId”。最后,使用自动完成ID和选项卡$ index将每个自动完成与每个选项卡链接,禁用非活动选项卡的自动填充。