Angular ui-select 标记在模糊时丢失文本输入 [英] Angular ui-select tagging lose text input on blur
问题描述
情况
大家好!我正在为我的应用程序使用 Angular ui-select 以便从数据库中选择用户.如果用户不在列表中,则可以使用标记来输入新条目.
Hello guys! I am using Angular ui-select for my app in order to select users from a database. Using Tagging is possible to enter a new entry in the event the user is not present in the list.
通过输入名称并按 ENTER 或 TAB,新条目将保存为新标签.
By writing the name and pressing ENTER or TAB the new entry is saved as a new tag.
除了一件小事外,一切正常:如果我用鼠标聚焦,我会丢失输入的内容,这对用户来说不太友好.
Everything is working fine except one little thing: if i focus out with the mouse i lose the input i have entered, and this is not quite user-friendly.
代码
<h3>Array of objects</h3>
<ui-select multiple tagging tagging-label="new tag" ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;">
<ui-select-match placeholder="Select person...">{{$item.name}} <{{$item.email}}></ui-select-match>
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
email: {{person.email}}
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.selectedPeople}}</p>
骗子
http://plnkr.co/edit/7fSAKmj3pLeeTaid4pMH?p=preview
问题
如何将输入文本保存为新标签,不仅可以通过按 ENTER 键,还可以通过鼠标聚焦?
How can i manage to save the input text as a new tag, not only by pressing ENTER, but also by focusing out with the mouse?
非常感谢!
推荐答案
只需创建一个指令.这将处理选项卡外的点击并输入.
Just create a directive. This handles the click outside tab and enter.
angular.module('module')
.directive('tagOnBlur', function($timeout) {
return {
require: 'uiSelect',
link: function(scope, elm, attrs, ctrl) {
scope.isTab = false;
ctrl.searchInput.bind("keydown keypress", function (event) {
if(event.which === 9 || event.which === 13) {
event.preventDefault();
scope.isTab = true;
}
});
ctrl.bind('click', function (event) {
scope.isTab = true;
});
ctrl.searchInput.on('blur', function() {
if (scope.isTab){
scope.isTab = false;
return;
}
if ((ctrl.items.length > 0 || ctrl.tagging.isActivated)) {
$timeout(function() {
ctrl.searchInput.triggerHandler('tagged');
var newItem = ctrl.search;
if ( ctrl.tagging.fct ) {
newItem = ctrl.tagging.fct( newItem );
}
if (newItem) ctrl.select(newItem, true);
});
}
});
}
};
});
这篇关于Angular ui-select 标记在模糊时丢失文本输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!