'在UI引導程序中顯示更多結果typeahead

我試圖執行顯示更多結果功能在UI引導程序中處於前沿狀態。最初它應該加載5個結果，然後如果結果超過5我想要顯示一個顯示更多結果選項再次加載API的所有結果（沒有限制）。'在UI引導程序中顯示更多結果typeahead

這裏的模板我的預輸入定義：

<input type="text" name="FullName" id="FullName" 
    class="form-control" autocomplete="false" required="required" 
    placeholder="Search by name" 
    uib-typeahead="ent as ent.FullName for ent in vm.findEntities($viewValue)" 
    typeahead-popup-template-url="entityPopup.tpl.html" 
    typeahead-template-url="popupMatch.tpl.html" 
    typeahead-on-select="vm.entitySelected($item)" 
    ng-model="vm.FullName">

我在與結果的計數父父控制器的變量。 $parent.$parent.vm._entityTotalResults。如果該計數超過5，那麼我想要顯示一個顯示更多按鈕，用於加載更多結果並將它們填充到預先輸入結果中。

我entityPopup.tpl.html如下：

只是默認一個一個添加<li></li>

<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 ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}"> 
      <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div> 
     </li> 
     <li ng-show="$parent.$parent.vm._entityTotalResults > 5">SHOW MORE</li> 
    </ul>

我的預輸入功能findEntities()如下：

vm.findEntities = function findEntities(viewValue, limit) { 
    return apiService.findEntities(viewValue, limit) 
    .then(function(matches) { 
     vm._entityTotalResults = matches.TotalResults; 
     return matches.Results; 
    }); 
    };

apiService.findEntities()是一個API功能需要一個可選的limit參數並返回$ http承諾。如果它爲空則返回所有結果，否則會限制它們。

我該如何實現？我在互聯網上沒有發現任何可以指引我走向正確方向的東西。

來源

2015-11-26 Gaui

你可以換行預輸入一個自定義的指令，並提供uibTypeahead與custom popup-template

來源

2016-02-19 10:51:13 kjasva

爲了得到這個工作，我不得不編輯UI引導源，添加事件偵聽到UibTypeaheadController。上述getMatchesAsync功能：

originalScope.$on('loadMore', function() { 
    hasFocus = true; 
    getMatchesAsync(modelCtrl.$viewValue); 
});

在您的列表項，顯示的負載更多，我添加了一個NG單擊它會發出loadMore事件，範圍$放出（「loadMore」）。這可以讓更多的點擊更新列表中的匹配項。

來源

2016-07-19 19:23:05 JamesIngold

'在UI引導程序中顯示更多結果typeahead

回答

相關問題