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屋！