md-autocomplete未显示文本

时间:2016-11-10 01:21:27

标签: javascript angularjs angular-material

我使用md-autocomplete进行自动完成,但由于某种原因,下拉列表中不包含我希望其包含的文字。以下是该问题的简化演示:

<md-autocomplete flex
        md-search-text="searchText"
        md-input-name="p"
        md-items="item in search(searchText)"
        md-item-text="item.display"
        md-floating-label="Name"
        md-delay="100"
>
</md-autocomplete>
$scope.search = function(){
    return $q.resolve([{
        value: 1,
        display: "one"
    }, {
        value: 2,
        display: "two"
    }, {
        value: 3,
        display: "three"
    }]);
};

请查看此fiddle以了解问题。

2 个答案:

答案 0 :(得分:2)

您尚未在md-item-template中加入md-autocomplete。您的md-autocomplete应该是这样的:

<md-autocomplete flex
            md-search-text="searchText"
            md-input-name="p"
            md-items="item in search(searchText)"
            md-item-text="item.display"
            md-floating-label="Name"
            md-delay="100"
    >
    <md-item-template>
        <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.display}}</span>
    </md-item-template>
</md-autocomplete>

Here是您代码的工作分支。

答案 1 :(得分:0)

pod install

AngularJs:

       <md-autocomplete flex
        md-search-text="searchText"
        md-items="item in search(searchText)"
        md-item-text="item.display"
        md-floating-label="Name"
        md-delay="100">
    <span md-highlight-text="searchText" md-highlight-flags="^i"> 
{{item.display}}</span>
<md-not-found>
Searchtext is invalid
</md-not-found>
</md-autocomplete>

这是使用 md-autocomplete 的完美方式,我更喜欢在 input 标签内使用 angular,因为 md-autocomplete 包含许多故障和错误。