我正在使用(很棒的)Angular Material建立一个网站。我现在正在使用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是材料自动填充的工作示例。
有人知道如何在Angular Material Autocomplete的建议中添加固定页脚吗?欢迎所有提示!
答案 0 :(得分:3)
我认为您无法向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
的{{1}} ng-if
,因为ng-show
的内容已经编译。
我已经更新了上面的答案,固定的答案有不同的风格。