Question

我有一个Angular输入字段，其作用类似于自动完成下拉列表。

我在输入与现有数据匹配时显示建议。当焦点丢失时，我必须隐藏下拉列表。

<input type="text" 
   ng-model="ctrl.inputs.name"
   ng-blur="ctrl.autocomplete.visible = false"
   ng-keyup="ctrl.handleAutocomplete()"/> <!-- logic for suggestions -->

<div ng-repeat="name in ctrl.names" data-name"{{name.name}}" 
   ng-click="ctrl.setName($event)">
    {{name.name}}
</div>

现在输入输入时，这很好用，我得到一个项目列表。理想情况下，您单击列表中的项目以将其设置在控制器中。我已经在控制器中隐藏了这些建议 - ctrl.autocomplete.visible = false。

但在选项ng-click之前，输入会调用ng-blur，这会隐藏下拉列表。所以我永远不会到达ng-click。删除ng-blur工作正常，但我需要在输入丢失焦点时隐藏下拉列表。帮助感谢。

Answer 1

删除

ng-blur="ctrl.autocomplete.visible = false"

来自

<input type="text" 
   ng-model="ctrl.inputs.name"
   ng-blur="ctrl.autocomplete.visible = false"
   ng-keyup="ctrl.handleAutocomplete()"/>

并设置

ctrl.autocomplete.visible = false;

在控制器文件中的ctrl.setName($event)方法的最后。

Answer 2

所以我扩展了我之前见过的指令，这应该可行。

Working Fiddle

<强>指令

var blurFocusDirective = function ($timeout) {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, elm, attr, ctrl) {
            if (!ctrl) {
                return;
            }
            elm.on('focus', function () {
                elm.addClass('has-focus');

                scope.$apply(function () {
                    ctrl.hasFocus = true;
                });
            });
            elm.on('blur', function () {
                $timeout(function() {
                    elm.removeClass('has-focus');
                    elm.addClass('has-visited');                        
                }, 250);

            });

        }
    };
};

app.directive('input', blurFocusDirective)
app.directive('select', blurFocusDirective);

此指令绑定到允许inputs和select字段。它会为所有输入字段has-focus添加一个类，然后将焦点和类has-visited添加到已访问过的所有字段（您可以使用has-visited进行自定义验证，或者是你想要）。

我在$timeout事件中添加了一个简短的blur，以便在它消失之前可以点击兄弟元素（否则指令工作得太快你无法点击自动填充选项）。

<强> HTML

ng-model的输入字段会自动添加类。为了让css选择器抓住兄弟姐妹，我将ng-repeat包裹在div中。

<input type="text" 
   ng-model="ctrl.inputs.name"
   ng-keyup="ctrl.handleAutocomplete()"/>
<div class="autoComplete">
    <div ng-repeat="name in ctrl.names" data-name"{{name.name}}" 
         ng-click="ctrl.setName($event)">
            {{name.name}}
    </div>
</div>

<强> CSS

以下css规则默认隐藏autoComplete部分。但如果兄弟姐妹有has-focus，则会显示autoComplete div。

.autoComplete { 
    color:#00F; 
    display:none; }
.has-focus + .autoComplete { 
    display:inline; }

Working Fiddle

在执行上一个处理程序之前检查下一个事件以隐藏自动完成

2 个答案: