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

Question

我正在使用 ui.bootstrap typeahead 编写一个 typeahead 搜索栏，并发现该组件非常易于使用。

我的 Controller 将数据输入$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)

然后，在 View 中，我有这样的内容:

<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

有没有办法同时搜索两者？

<小时/> 奖励:我很乐意在我的人的名字下面显示他们的 Angular 色...提示？ <小时/> 编辑:我知道这一点Typeahead using object name选择整个对象，但我希望也将其显示在弹出窗口中...... <小时/> 此处添加了 Plnkr --> http://plnkr.co/edit/KqvUlf

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

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

Answer 1

我编辑了你的 plunkr 来回答你的额外问题:

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

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

对于主要问题，我纯粹的本性是建议您修改数组以保持一致，这样您就必须始终以名称进行搜索。仅仅因为你可以用 Angular 做很多事情并不意味着你应该这样做，所以我是从纯粹的软件工程 Angular 来看的。

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