Question

我正在创建一个应用程序，用户可以使用typeahead搜索10.000+个birnames。目前我已经完成了所有设置，没有预览，但我想在名称旁边添加一个小拇指进行预览。

看到我无法在我的数据库中为每只鸟的每个文档添加每个鸟名的10.000个网址，我想在输入时向posibilies提出json请求。

我已经相应地设置了所有内容：

带有typeahead的搜索输入，用于从我的数据库中收集所有10.000多个名称：

 <input type="text" class="form-control search-input-nav" placeholder="Birdname" 
        autocomplete="off" ng-model="findBird" typeahead-no-results="noResults"
        uib-typeahead="bird for bird in birds | filter:$viewValue | limitTo:8" 
        typeahead-select-on-blur="true" 
        typeahead-template-url="/partials/model/birdTypeahead.html" 
        ng-enter="findBirdlist(findBird, noResults)">

        <div class="ErrorSearchBird" ng-if="noResults">
            <div class="errorTriangle"></div>
            <div class="errorText">Please pick a valid birdname</div>
        </div>

模板用于显示图像预览和相应名称：

<div ng-controller="navCtrl">
    <a class="clickable">
      <img ng-src="https://upload.wikimedia.org/wikipedia/commons/8/87/Little_tinamou.jpg" 
           width="16">
      <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
    </a>
</div>

如上所示，我想显示特定鸟的图像，具体取决于它旁边的match.label。

有没有办法让我检查何时显示新名称，如果是，请进行json调用并相应地检索图像？我已经尝试使用ng-keydown虽然我不知道如何传递鸟类。

我希望这有点清楚..如果不是，请随时问下面，我会尝试以另一种方式解释它。

ui-typeahead中的图像预览 - AngularJS

0 个答案: