如何向UI-Bootstrap Typeahead指令添加分頁

Question

我有一個Angular項目，正在使用UI-Bootstrap的Typeahead指令。

問題在於，當使用typeahead指令處理大量相似數據時，我發現僅顯示結果的前x個數可能不足以對所有用戶有效，反之，顯示所有結果卻過於緩慢且不切實際。

這個想法是在預輸入控件的彈出窗口中提供一種分頁機制，同時仍保留所有現有功能。

在仍然使用typeahead指令的情況下如何解決此問題？

Answer 1

通過使用$ provide.decorator，您可以更改指令使用的HTML來滿足自己的需求，而無需更改指令的工作方式。

請執行下列操作：

1. 在此處下載最新版本的UI-Bootstrap，找到您要覆蓋的指令及其使用的html。 （在這種情況下，它是typeaheadPopup-或uibTypeaheadPopup（如果您使用的是最新版本）

2. 復制指令使用的html字符串，並對其進行更改以適合您的需求。 在這種情況下，使其使用以下html ：（我將預輸入結果限制為8個，但您可以更改）

    <ul class="dropdown-menu" ng-show="isOpen() && !moveInProgress" ng-style="{top: position().top+'px', left: position().left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}"> <li style="border-bottom: solid 1px lightgray" class="customFadeAnimate" ng-repeat="match in matches | startFrom:(currentPage*8)-8 | limitTo: 8 track by $index " ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}"> <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div> </li> <div ng-click="$event.stopPropagation()" ng-hide="matches.length - 8 < 1" style="text-align:center;margin: 5px;color: #808080;min-width:250px"> <span> {{((currentPage || 1)*8)-8+1}} to {{((currentPage || 1)*8 > matches.length) ? matches.length : (currentPage || 1)*8}} of {{matches.length}} </span> <pager style="margin-top:-20px;margin-bottom:4px" total-items="matches.length" ng-model="currentPage" items-per-page="8" align="true" previous-text="Prev" next-text="Next"></pager> </div> </ul> 

3. 創建一個裝飾器模塊以使用您自己的覆蓋現有指令的html模板：

    (function () { 'use strict'; angular.module('app.decorators', ['ui.bootstrap']) .config(['$provide', Decorate]); function Decorate($provide) { $provide.decorator('typeaheadPopupDirective', function ($delegate) { var directive = $delegate[0]; directive.templateUrl = "app/customTemplates/typeAheadPopup.html"; return $delegate; }); } })(); 

我已經使用了此圖像的模板功能-但您應該獲得類似的結果：

注意：您需要在“ Directive”一詞后附加要更改的指令名稱。 您還需要確保在ui-bootstrap模塊之后引用了您創建的裝飾器模塊，以使模板生效。

我已使用以下stackoverflow答案作為參考： SO參考