Angucomplete-altでカスタムテンプレートを使用するには？

Question

私はES6とAngularのフロントエンドアプリケーションを開発中です。私はオートコンプリートで検索ボックスを作成しようとしており、Angucomplete-altを使ってオプションリストのカスタムテンプレートを使いたいと思っています。

テンプレートを作成しましたが、オプションは引き続き標準形式であり、実行によってエラーが発生することはありません。 examples pageにはサンプルテンプレートがありません。

テンプレートを作成する方法の例を教えてもらえますか？

マイサーチ：

<angucomplete-alt id="country-search" 
       placeholder="Search countries" 
       pause="100" 
       selected-object="selectedCountry" 
       local-data="getCountries()" 
       search-fields="name" 
       title-field="name" 
       minlength="1" 
       template-url="/country-list-item.html" 
       input-class="form-control form-control-small"></angucomplete-alt> 

テンプレート：

<div class="autocomplete-template"> 
    <div class="left-panel" style="display: inline-block;"> 
     <span class="flag-icon flag-icon-{{ ::data.isoCode | lowercase}}"></span> 
    </div> 
    <div class="right-panel" style="display: inline-block;"> 
     <span ng-bind-html="$highlight($getDisplayText())"></span> 
    </div> 
</div> 

すべての提案を歓迎いたします。

ありがとうございます。

Answer 1

私はそれを解決しました。私は例のページのHTMLコードからテンプレートのコードをコピー：

<div class="angucomplete-holder" ng-class="{'angucomplete-dropdown-visible': showDropdown}"> 
 
<p>This is custom</p> 
 
    <input ng-model="searchStr" 
 
    ng-disabled="disableInput" 
 
    type="text" 
 
    placeholder="{{placeholder}}" 
 
    ng-focus="onFocusHandler()" 
 
    class="{{inputClass}}" 
 
    ng-focus="resetHideResults()" 
 
    ng-blur="hideResults($event)" 
 
    autocapitalize="off" 
 
    autocorrect="off" 
 
    autocomplete="off" 
 
    ng-change="inputChangeHandler(searchStr)"/> 
 
    <div class="angucomplete-dropdown" ng-show="showDropdown"> 
 
    <div class="angucomplete-searching" ng-show="searching" ng-bind="textSearching"></div> 
 
    <div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)" ng-bind="textNoResults"></div> 
 
    <div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" ng-mouseenter="hoverRow($index)" ng-class="{'angucomplete-selected-row': $index == currentIndex}"> 
 
     <div ng-if="imageField" class="angucomplete-image-holder"> 
 
     <img ng-if="result.image && result.image != ''" ng-src="{{result.image}}" class="angucomplete-image"/> 
 
     <div ng-if="!result.image && result.image != ''" class="angucomplete-image-default"></div> 
 
     </div> 
 
     <div class="angucomplete-title" ng-if="matchClass" ng-bind-html="result.title"></div> 
 
     <div class="angucomplete-title" ng-if="!matchClass">{{ result.title }}</div> 
 
     <div ng-if="matchClass && result.description && result.description != ''" class="angucomplete-description" ng-bind-html="result.description"></div> 
 
     <div ng-if="!matchClass && result.description && result.description != ''" class="angucomplete-description">{{result.description}}</div> 
 
    </div> 
 
    <div class="angucomplete-row" ng-click="selectResult({title: searchStr, originalObject: { name: searchStr, custom: true }})" ng-mouseenter="hoverRow(results.length)" ng-class="{'angucomplete-selected-row': results.length == currentIndex}"> 
 
     <div class="angucomplete-title">Select custom country '{{ searchStr }}'</div> 
 
    </div> 
 
    </div> 
 
</div>