md-chips 和 md-autocomplete 输入字段
md-chips and md-autocomplete input field
当用户使用 md-chips 输入内容并且焦点被移除时,条目仍然存在。一旦焦点被移除,有没有办法删除任何不是芯片的条目?
The Out Standing Text still shows once the focus is removed
通常情况下,您应该可以使用 ng-blur
来完成此操作,但由于某种原因,与 md-autocomplete
一起使用的该指令存在问题:https://github.com/angular/material/issues/3906
但我尝试以不同的方式解决它,不是最正确的方法,但它有效。您要做的是在 md-autocomplete
内的 input
中与 blur
绑定事件。在这种情况下,您必须清除 md-autocomplete 的 searchText。所以只需像这样在您的控制器中绑定该事件:
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 毫秒延迟时,它按我预期的那样工作。肯定有更好的方法来做,但只要尝试这样做,也许对你来说就足够了。
当用户使用 md-chips 输入内容并且焦点被移除时,条目仍然存在。一旦焦点被移除,有没有办法删除任何不是芯片的条目? The Out Standing Text still shows once the focus is removed
通常情况下,您应该可以使用 ng-blur
来完成此操作,但由于某种原因,与 md-autocomplete
一起使用的该指令存在问题:https://github.com/angular/material/issues/3906
但我尝试以不同的方式解决它,不是最正确的方法,但它有效。您要做的是在 md-autocomplete
内的 input
中与 blur
绑定事件。在这种情况下,您必须清除 md-autocomplete 的 searchText。所以只需像这样在您的控制器中绑定该事件:
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 毫秒延迟时,它按我预期的那样工作。肯定有更好的方法来做,但只要尝试这样做,也许对你来说就足够了。