Angular 材质选项卡和自动完成功能

Posted 2023-03-05

【中文标题】Angular 材质选项卡和自动完成功能

【英文标题】：Angular Material Tabs and autocomplete

【发布时间】：2016-03-23 08:08:00

【问题描述】：

我在我的 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>

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

为什么会这样显示？有解决办法吗？

【问题讨论】：

你用过material.angularjs.org吗？抱歉，我刚开始使用 angular.js，所以我可能帮不上忙

是的，版本 0.11.1

他们都显示相同的东西是否表明它们链接到同一个模型，即范围对象？

是的，它们链接到同一个模型。这是我的目的。

无法复制它。你可以尝试创建一个 Plunker 吗？

【参考方案1】：

我尝试使用 Angular 1.3.0 和 Angular-Material 0.11.4 进行复制并且工作正常。

您可以尝试在每个 md-autocomplete 中放置一个 md-input-id="theInputId"。作为最后的手段，使用自动完成 id 和选项卡 $index 将每个自动完成与每个选项卡链接起来，禁用非活动选项卡的自动完成。

【讨论】：

我为所有自动完成提供了相同的 md-input-id 但没有解决问题