在自动完成的建议列表中添加带有 link 的页脚 material angular

Question

我正在使用（看起来很棒）Angular Material. I am now using the Autocomplete Component 构建一个网站，我想在建议列表中添加一个固定的页脚。您可以在下图中看到类似的内容，其中 Pinterest 在用户搜索建议的页脚中添加了 twitter 和 google+：

我尝试在 html md-autocomplete 组件中添加页脚：

<md-content layout-padding="" layout="column">
    <form ng-submit="$event.preventDefault()">
        <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" md-min-length="0" placeholder="e-mail of naam " md-menu-class="autocomplete-custom-template">
            <md-item-template>
                <span class="item-title">
                    <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
                    <span> {{item.name}} </span>
                </span>
            </md-item-template>
            <md-item-template>
                <footer><a href="">Some link</a></footer>   
            </md-item-template>
        </md-autocomplete>
    </form>
</md-content>

不幸的是，这不起作用，没有显示任何内容。 Here 是 Material 自动完成的工作示例。

有人知道如何在 Angular Material 自动完成的建议中添加固定页脚吗？欢迎所有提示！

Answer 1

我认为您不能向 md-autocomplete 添加其他模板。我相信 md-autocomplete 清理选择列表，并通过重复 md-item-template

重建它

因此，最好在搜索结束时添加额外的数据。

这是例子。 http://codepen.io/anon/pen/xGyLXP?editors=101

控制器部件

self.fixedOnes = [
  {'name'      : 'FIXED1', type: 'fixed'},
  {'name'      : 'FIXED2', type: 'fixed'},
  {'name'      : 'FIXED3', type: 'fixed'}
];

Html部分

<md-autocomplete  ...
  md-items="item in (ctrl.querySearch(ctrl.searchText).concat(ctrl.fixedOnes))" ... >
    <md-item-template>
      <div ng-class="{fixed:item.type=='fixed'}">
        <span> {{item.name}} </span>
      </div>
    </md-item-template>
  </md-autocomplete>

------------编辑--------------------
对于，不同的风格和内容，ng-class，ng-if，ng-show，因为md-item-template的内容是编译出来的

。

我已经更新了上面的固定答案以具有不同的风格。

在自动完成的建议列表中添加带有 link 的页脚 material angular

Add footer with link in list of suggestions in autocomplete material angular

autocomplete

angularjs

angular-material