大佬教程收集整理的这篇文章主要介绍了angularjs – Bootstrap-UI Typeahead在结果列表中显示多个属性?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
amazing grace | movie amazing grace | song
…所以用户知道他们正在选择什么。更好的是标题旁边的图标。换句话说,列表中的每个结果都包含一些HTML。这些都可以开箱即用吗?
例如,要显示您想要的文本,您可以写:
typeahead="item as item.title + ' (' + item.type + ')' for item in titles | filter:{title:$viewvalue}"
如果您的数据模型如下所示:
$scope.titles = [ {title: 'Amazing Grace',type: 'movie'},{title: 'Amazing Grace',type: 'song'} ];
在这里工作的朋友:
http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview
在类型头部属性中为标签编写复杂表达式可能会变得丑陋,但没有任何阻止您将标签计算逻辑移动到范围上公开的函数,例如:
typeahead="item as label(item) for item in titles | filter:{title:$viewvalue}"
$scope.label = function(item) { return item.title + ' (' + item.type + ')'; };
另一个朋友:http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=preview
就您关于图标的问题而言,您可以在标签表达式中嵌入HTML,但是写入和维护变得非常糟糕。幸运的是,typeahead指令允许您为匹配的项目提供自定义模板,如下所示:
typeahead-template-url="itemTpl.html"
在自定义模板中,您可以使用任何您想要的表达式或AngularJS指令。通过ngClass指令的一点帮助,添加图标变得微不足道:
<script type="text/ng-template" id="itemTpl.html"> <a tabindex="-1"> <i ng-class="'icon-'+match.model.type"></i> <span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span> </a> </script>
和工作的朋友:http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview
很整洁的小指令,不是吗?
以上是大佬教程为你收集整理的angularjs – Bootstrap-UI Typeahead在结果列表中显示多个属性?全部内容,希望文章能够帮你解决angularjs – Bootstrap-UI Typeahead在结果列表中显示多个属性?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。