html angular-ui-bootstrap Typeahead的示例用法(https://angular-ui.github.io/bootstrap/)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html angular-ui-bootstrap Typeahead的示例用法(https://angular-ui.github.io/bootstrap/)相关的知识,希望对你有一定的参考价值。

<!--	first define a popup template 'popup.html' that appears with the search result	-->
<div class="custom-popup-wrapper"
	 ng-style="{top: position().top+'px', left: position().left+'px'}"
	 style="display: block; min-width: 100%;"
	 ng-show="isOpen() && !moveInProgress"
	 aria-hidden="{{!isOpen()}}">
	<ul class="dropdown-menu" role="listbox" style="display: block">
		<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}}">
			<a href="{{match.model.href}}">
			  <span ng-bind-html="match.model.name | uibTypeaheadHighlight:query"></span>
			</a>
		</li>
	</ul>
</div>

<!--	then define get function to return remote data	-->
$scope.getResults = function(viewValue) {
	return $http.get(baseURL+'/some/rest/call?key='+viewValue);
}

<!--	finally display the popup from the main html -->
<input type="text" ng-model="modelName" class="form-control" placeholder="Type in your search term"
	<!-- loop through objects returned by get function defined in controller, display their names ($viewValue is an angular variable containing the value typed in by the user) -->
	uib-typeahead="object as object.name for object in getResults($viewValue)"
	<!--	call previously defined template (relative to the project folder)	-->
	typeahead-popup-template-url="views/popup.html"
	<!--	define booleans for search status (still loading / no result)	-->
	typeahead-loading="loadingResults" typeahead-no-results="noResults">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
  <i class="glyphicon glyphicon-remove"></i> No Results Found
</div>

以上是关于html angular-ui-bootstrap Typeahead的示例用法(https://angular-ui.github.io/bootstrap/)的主要内容,如果未能解决你的问题,请参考以下文章

在 angular-ui-bootstrap 中创建一个两列下拉列表

angular-ui-bootstrap 模态框可以弹出多个吗

如何在打字稿中使用 angular-ui-bootstrap(模态)?

在 webpack 中使用 angular-ui-bootstrap

angular-ui-bootstrap 日期选择器和屏蔽输入

Angular-ui-bootstrap 手风琴和折叠动画不起作用