我正在使用(外观很棒)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是 Material 自动完成的工作示例。
有谁知道我如何向 Angular Material Autocomplete 的建议添加固定页脚?欢迎所有提示!
最佳答案
我不认为您可以向 md-autocomplete
添加其他模板.
我相信md-autocomplete
清理选择列表,并通过重复 md-item-template
重建它
因此,最好在搜索结束时添加其他数据。
这是示例。
http://codepen.io/anon/pen/xGyLXP?editors=101
Controller 零件
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
的内容被编译。我已经更新了固定答案的上述答案,使其具有不同的风格。
关于angularjs - 在自动完成 Material Angular 的建议列表中添加带有链接的页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31473054/