Question

我正在使用ui.bootstrap typeahead编写一个预先输入的搜索栏，并发现该组件非常直接使用。

我的控制器将数据提供给$scope，如下所示：

var good = [{ name: 'Mario', role: 'sup' },
            { name: 'Luigi', role: 'bro' },
            { name: 'Yoshi', role: 'pet' }]

var bad = [{ badname: 'Bowser', role: 'boss' },
           { badname: 'Sauron', role: 'eye' },
           { badname: 'Jason', role: 'knifer' }]

$scope.data = good.concat(bad)

然后，在查看中，我有类似的内容：

<div class="container-fluid">
    <pre>Model: {{selected| json}}</pre>
    <input type="text" ng-model="selected" typeahead="datum.name for datum in data | filter:$viewValue | limitTo:4">
</div>

这最终会找到好人，但不是坏人（因为他们有badname而不是name

有没有办法搜索两者？

<小时/> 奖金：我很乐意将role我的家伙展示在他们的名字之下......提示？

编辑：我知道这个Typeahead using object name来选择整个对象，但我希望在弹出窗口中显示它...

Plnkr在这里添加 - ＆gt; http://plnkr.co/edit/KqvUlf

保持控制台打开，您将看到有关我正在谈论的标签的问题

只有善良的人出现，结束即使在搜索坏人中不存在的字段时，搜索也会抛出异常

Answer 1

我编辑了你的plunkr来回答你的奖金问题：

http://plnkr.co/edit/Yo4xBT?p=preview

基本上，您可以使用自定义模板通过匹配执行任何操作。

对于主要问题，我的纯粹性质是建议您修改数组以保持一致，因此您必须始终在名称中搜索。只是因为你可以用角度做很多事情并不意味着你应该这样做，所以我从纯粹的软件工程角度讲。

编辑：我喜欢你的json数据。

Answer 2

感谢 @baba 我设法解决了主要的奖金问题。

主要问题

为了使用不同的属性名称正确标记数据，您可以在HTML

中指定多个标签

<div class="container-fluid" ng-controller="TypeaheadCtrl">
  <pre>Model: {{selected| json}}</pre>
  <input type="text" ng-model="selected" 
      typeahead="datum as (datum.name+datum.badname) for datum in data | filter:$viewValue | limitTo:8" 
      typeahead-template-url='tpl.html'>
</div>

这将根据数据显示一个或另一个问题是，如果两者都存在，它们将显示两者 ......

也就是说，可能最好的选择是为typeahead创建一个格式良好的数组，而不会弄乱代码，就像 @baba sugggested

<小时/>

奖金问题

使用匹配模板，问题很容易解决（例如）像这样的问题的 tpl.html

<a> {{match.label}}<br> {{match.model.role}} </a>

就是这样。

再次成为男人们

Answer 3

以与我相同的怀疑向他人澄清。如果您想知道为什么突出显示消失了，您只需要在模板中应用以下过滤器。

<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>

AngularJS - 具有异构数据数组的ui.bootstrap typeahead

3 个答案:

主要问题

奖金问题