[英]How to clear uib-typeahead dropdown list in angularjs
我使用 uib-typeahead。 在 uib-typeahead 中输入内容时,我正在进行 api 调用。
我在 uib-typeahead 文本框旁边添加了一个取消图标,以便在我单击该取消图标时清除该文本和下拉值,但是当我单击取消图标时,它只会清除 uib-typeahead 中的文本。 下拉菜单不清楚。
单击取消图标时如何清除下拉列表?
HTML
<input class="form-control" type="text" ng-model="searchObject" placeholder="Search name"
uib-typeahead="value as value.name for a in search($viewValue)"
typeahead-on-select="onSelect($item, $model, $label)">
<--! This is Cancel button -->
<a class="clear" ng-click="searchObject = null;">
<span class="fa fa-times"></span>
</a>
JS
$scope.search = function(val) {
//Some API call and return Array Of Object
return Array Of Object
};
我刚刚开始研究一个类似的问题 - 隐藏下拉菜单。
假设您的 input 元素包含在一个包含 id 的表单元素中:
HTML
<form name="test" id="test">
<input class="form-control" type="text" ng-model="searchObject" placeholder="Search name" uib-typeahead="value as value.name for a in search($viewValue)"
typeahead-on-select="onSelect($item, $model, $label)">
<--! This is Cancel button -->
<a class="clear" ng-click="hideDropDown()">
<span class="fa fa-times"></span>
</a>
</form>
uib-typeahead 在具有“下拉菜单”类的无序列表中创建下拉菜单。
您可以在函数中访问下拉菜单样式:
JS
$scope.hideDropDown = function() {
var dropDown = document.getElementById("test").querySelectorAll("ul.dropdown-menu");
dropDown[0].style.display = "none";
};
变量 dropDown 返回包含下拉菜单类的所有 UL 元素的数组。 如果您有多个 uib-typeahead dropDown,则可以按它们在 HTML 中的顺序进行引用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.