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);
    }
)

我使用超时的原因是，如果过快清除searchText变量，则不会添加芯片.但是，当我添加300ms延迟时，它按预期工作.当然，有更好的方法可以做到，但是只要尝试以这种方式进行，也许对您来说就足够了.

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

Here is working codepen: http://codepen.io/anon/pen/QdNydx

这篇关于md-chips和md-autocomplete输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！