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

Question

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

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

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

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

Answer 1

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

执行以下操作：

下载最新版本的 UI-Bootstrap here 并找到您要覆盖的指令以及它使用的 html 。（在这种情况下，它是 typeaheadPopup - 或者 uibTypeaheadPopup 如果您使用的是最新版本）

复制指令使用的 html 字符串并将其更改为满足您的需要ui。在这种情况下，让它使用以下 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>

创建装饰器模块以用您自己的模板覆盖现有指令的 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 模块之后被引用，以便您的模板生效。

我使用了以下 Whosebug 答案作为参考：SO Reference

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

How can I add paging to the UI-Bootstrap Typeahead Directive

html

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap