javascript - 如何将分页添加到 UI-Bootstrap Typeahead 指令

Question

我有一个 Angular 项目，并且正在使用 UI-Bootstrap 的 Typeahead 指令。

问题是，当使用 typeahead 指令处理大量相似数据时，我发现显示前 x 个结果可能不足以满足所有用户的需求，相反，显示所有结果太慢且不切实际。结果。

这个想法是在 typeahead 控件的弹出窗口内提供分页机制，同时仍然保留所有现有功能。

如何在仍然使用 typeahead 指令的情况下解决这个问题？

Answer 1

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

执行以下操作:

1. 下载最新版本的 UI-Bootstrap here并找到您想要覆盖的指令以及它使用的 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;
           });
       }
   })();
   

我已经使用了此图像的模板功能 - 但您应该获得类似的结果:

注意:您需要在要更改的指令名称后附加“指令”一词。您还需要确保在 ui-bootstrap 模块之后引用您创建的装饰器模块，以便您的模板生效。

我使用了以下 stackoverflow 答案作为引用:SO Reference