Как добавить пейджинг в директиву UT-Bootstrap Typeahead

Question

У меня есть Угловой проект, и я использую директиву UT-Bootstrap Typeahead.

Проблема заключается в том, что при использовании директивы typeahead для обработки большого количества похожих данных я считаю, что показ верхнего числа х результатов может быть недостаточным для всех пользователей, и наоборот, он слишком медленный & нецелесообразно показывать все результатов.

Идея состоит в том, чтобы обеспечить механизм подкачки внутри всплывающего окна управления typeahead, сохраняя при этом все существующие функции.

Как я могу решить эту проблему, продолжая использовать директиву typeahead?

Answer 1

С помощью $ provided.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