关于
typeahead来自http://angular-ui.github.io/bootstrap/的指令的注意事项是,它试图模仿AngularJS
的select指令所使用的语法。这意味着用于选择要绑定的模型和标签的所有表达式都是AngularJS表达式。反过来,这意味着您可以使用任何AngularJS表达式来计算标签的文本。
例如,要显示所需的文本,您可以编写:
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属性中为标签编写复杂的表达式可能很难看,但是没有什么可以阻止您将标签计算逻辑移动到作用域上公开的函数,例如:
typeahead="item as label(item) for item in titles | filter:{title:$viewValue}"其中
label是在范围内公开的函数:
$scope.label = function(item) { return item.title + ' (' + item.type + ')'; };另一个pl: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-></i> <span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span> </a></script>
和工作中的小伙伴:http
://plnkr.co/edit/me20JzvukYbK0WGy6fn4?
p=
preview
整洁的小指令,不是吗?



