md-chips 和 md-autocomplete 输入字段 [英] md-chips and md-autocomplete input field
问题描述
当用户使用 md-chips 输入一个输入并且焦点被移除时,该条目仍然存在.一旦焦点被移除,有没有办法删除任何不是芯片的条目?焦点移开后仍会显示突出文字
When user enters an input with md-chips and the focus is removed the entry is still there. is there a way to delete any entry that is not a chip once the focus is removed? The Out Standing Text still shows once the focus is removed
推荐答案
通常情况下,您应该可以使用 ng-blur
来完成,但由于某种原因,该指令存在问题与 md-autocomplete
一起使用:https://github.com/angular/material/issues/3906
Normally, you should be able to do it by using ng-blur
but for some reason there is an issue with that directive in use with md-autocomplete
: https://github.com/angular/material/issues/3906
但我试图以不同的方式解决它,不是最正确的方法,但它有效.您需要做的是在 md-autocomplete
内的 input
中使用 blur
绑定事件.在这种情况下,您必须清除 md-autocomplete 的 searchText.因此,只需以某种方式将该事件绑定到您的控制器中:
But i tried to solve it differently, not the most correct way, but it works. What you have to do is bind event with blur
in input
inside md-autocomplete
. In this event you have to clear your searchText of md-autocomplete. So just bind that event in your controller somehow like that:
angular.element(document.querySelector('md-autocomplete input')).bind('blur',
function(){
setTimeout(function(){
angular.element(document.querySelector('md-autocomplete')).scope().ctrl.searchText = '';
angular.element(document.querySelector('md-autocomplete')).scope().$apply();
}, 300);
}
)
我使用 timeout 的原因是如果 searchText 变量清除得太快,则不会添加芯片.但是当我添加 300 毫秒延迟时,它按我的预期工作.肯定有更好的方法来做到这一点,但只要尝试这样做,也许对你来说就足够了.
The reason why I used timeout was the fact that chip was not added if searchText variable was cleared too fast. But when I added 300ms delay it worked as I expected. For sure there is better way to do it, but just try to do it this way and maybe it will be enough for you.
这是工作代码笔:http://codepen.io/anon/pen/QdNydx
这篇关于md-chips 和 md-autocomplete 输入字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!