AngularJS-ui.bootstrap使用异构数据数组提前键入

我正在使用

ui.bootstrap-typeahead

编写一个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>

然后，在视图中，我有如下内容：

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>

模型：{selected | json}

这最终会搜索好人，但不会搜索坏人（因为他们有

badname

而不是

name

有没有一种方法可以同时搜索这两种内容？

---

奖励：我想在我的手下的名字下面显示他们的

角色

，提示？

---

编辑：我知道选择整个对象时会出现这种情况，但我也希望在弹出窗口中显示它。。。

---

此处添加了Plnkr-->

保持控制台打开，您将看到我所说的标签问题

---

只有好人出现，即使在搜索坏人中不存在的字段时，搜索也会抛出一个异常

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

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

对于主要问题，我的纯粹主义本质是建议您修改数组以保持一致，这样您就必须始终名副其实地搜索。仅仅因为您可以使用angular做很多事情并不意味着您应该这样做，所以我是从纯软件工程的角度讲的

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

多亏了@baba，我成功地解决了主要问题和奖金问题

主要问题 为了使数据即使使用不同的属性名称也能正确地标记，您可以在HTML中指定多个标签

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

模型：{selected | json}

这将显示一个或另一个，具体取决于数据。
问题是，如果两者都存在，它们将同时显示。。。

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

---

奖金问题 使用匹配模板，问题很容易解决（例如）如下

tpl.html

{{match.label}}

{{match.model.role}

就这样

---

Thx再次向其他人澄清了我的疑问。 如果你想知道为什么高亮显示消失了，你只需要将下面的过滤器应用到你的模板上

如果你能提供一个plunker，我可以查看一下。@pkozlowski.opensource你是对的，我已经添加了一个plnkr来演示这个问题。请检查一下。Thx，这很有趣！我注意到，例如，字段上的突出显示消失了，我想这是某种默认模板的一部分……有什么地方可以在我找到它来破解之前？哦，顺便说一句，jsons的thx:DYU可以只检查字体的代码，或者只使用默认插件将样式复制到模板中，这就是我要做的。太好了！我已经深入研究了代码，找到了解决这两个问题的方法。我会很快回复。非常感谢你的帮助。我很好奇ing，由于模板只是几行HTML，我可以用$templateCache模块复制您在ui.bootstrap中所做的操作。我尝试插入

typeahead模板url='typeahead-match.HTML'

和

$templateCache.put（'typeahead-match.HTML'，'…'））

但它只显示空行…你有什么线索吗？我自己不是$templateCache的大用户，但我认为使用它不会有问题。如果你在控制器中记录get，你会得到什么？如果模板中有多个SPAN元素，如何突出显示？