angularjs – 在UI bootstrap typeahead中’显示更多结果’
发布时间:2020-12-17 18:04:35 所属栏目:安全 来源:网络整理
导读:我正在尝试在UI引导程序中的typeahead中实现显示更多结果功能.最初它应该加载5个结果,然后如果结果超过5我想显示一个显示更多结果选项以再次从API加载所有结果(没有限制). 这是我在模板中的预先定义: input type="text" name="FullName" id="FullName" clas
我正在尝试在UI引导程序中的typeahead中实现显示更多结果功能.最初它应该加载5个结果,然后如果结果超过5我想显示一个显示更多结果选项以再次从API加载所有结果(没有限制).
这是我在模板中的预先定义: <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.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 promise.如果它为null则返回所有结果,否则会限制它们. 我怎么能实现这个?我没有在互联网上找到任何可以指引我走向正确方向的东西. 解决方法
您可以将typeahead包装在自定义指令中,并为uibTypeahead提供
custom popup-template
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |