'在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

回答

相关问题