Question

我有一个网页，它有一个自动完成组件，使用Jquery到Angular JS中的typeahead组件。数据结构是相同的

runners=
    [{"id":"8425","value":"8425","label":"Alan Adams"},
    {"id":"4559","value":"4559","label":"David Adams"},
    {"id":"7564","value":"7564","label":"Dessie Adams"}]

这个想法是用户可以输入跑步者的价值＆＃39;或者＆＃39;标签＆＃39;值（即他们的会员ID或名称）并在最后得到整个跑步者对象。

jQuery自动完成组件执行此操作

jQuery("#memberfilter").autocomplete({
    source: bhaa_members,
    minLength: 3,
    source: function (request, response) {
        var matcher = new RegExp(jQuery.ui.autocomplete.escapeRegex(request.term), "i");
        response(jQuery.grep(bhaa_members, function(value) {
            return matcher.test(value.label) || matcher.test(value.value);
        }));
    },

使用匹配器检查＆＃39;标签＆＃39;或者＆＃39;值＆＃39;。

在我的角度版本中

<div class='container-fluid typeahead-demo' ng-controller="memberTypeaheadCtrl">
<h4>Search for Member</h4>
<input type="text" 
    ng-model="runnerSelected"
    uib-typeahead="runner.label for runner in runners | filter:$viewValue | limitTo:8"
    class="form-control"/>
<pre>Member: {{runnerSelected | json}}</pre>

这样我就可以通过＆＃39;标签＆＃39;进行过滤，我添加了这个按“＆＃39;值＆＃39;

的搜索功能

 uib-typeahead="runner.value as runner.label for runner in runners | filter:$viewValue | limitTo:8"

但在每种情况下，我只会得到一个标签＆＃39;或者＆＃39;价值＆＃39;而不是我需要的跑步者对象？

编辑 - 回答

经过多一点挖掘后，我在https://stackoverflow.com/a/28751281/55794找到了一个答案，它使用＆＃39; typeahead-on-select＆＃39;过滤第二个对象属性

<input type="text"
     ng-model="runnerSelected"
     uib-typeahead="runner as runner.label for runner in runners | filter:$viewValue | limitTo:8"
     typeahead-editable="false"
     typeahead-on-select="model=$item.value"
     typeahead-loading="loadingLocations"
     typeahead-no-results="noResults"
     class="form-control"/>

我现在可以输入一个＆＃39;标签＆＃39;或者一个“价值”并且总是得到一个跑步者。

Answer 1

你错了。两者都使用$ viewValue作为过滤器来过滤数组。由于它是一个字符串，它将寻找一个包含输入值的任何属性的跑步者。阅读角度滤波器滤波器的文档，了解它的工作原理。如果您需要一种匹配所需跑步者的不同方式，您当然可以使用单独的过滤器，而不仅仅是$ viewValue。

要让跑步者成为您的模特，您只需要

runner as runner.label for runner in runners | filter:$viewValue | limitTo:8

Angular typeahead，由多个json对象字段过滤

1 个答案: