Angular Material:md-autocomplete - 如何在 Enter 事件中隐藏 md-autocomplete-suggestions? [英] Angular Material: md-autocomplete - how to hide md-autocomplete-suggestions on Enter event?

问题描述

我有md-autocomplete:

<md-autocomplete 
                         md-min-length="1"
                         ng-enter="presEnter();"
                         md-no-cache="true"                        
                         md-selected-item="selectedItem" 
                         md-search-text="searchText" 
                         md-items="item in querySearch(searchText)"
                         md-item-text="item.name" 
                         placeholder="Search for a vegetable">
          <span md-highlight-text="searchText">{{item.name}} :: {{item.type}}</span>
        </md-autocomplete>

带指令:ng-enter.

我的目标:当用户按下 Enter 我想隐藏 md-autocomplete-suggestions 下拉菜单

My goal: When user presses Enter I want to hide md-autocomplete-suggestions dropdown

我从 HTML 中知道我需要以某种方式调用:$mdAutocompleteCtrl.hidden = true; 但不知道如何在 Controller 中使用 $mdAutocompleteCtrl.

I know from HTML I need somehow to call: $mdAutocompleteCtrl.hidden = true; but have no idea how to use $mdAutocompleteCtrl in Controller.

我用谷歌搜索并发现:

$timeout( function() { $scope.$$childHead.$mdAutocompleteCtrl.hidden = true; },100);

但是没有 $mdAutocompleteCtrl(至少在我的 JS 中，只有在 HTML 中，我不知道它的范围)

but there is no $mdAutocompleteCtrl (at least in my JS, only in HTML and i don't know its scope)

我玩这个示例:输入a"，然后按下下拉菜单输入.

I play with this example: type 'a' and after dropdown press Enter.

有什么想法吗?

推荐答案

$mdAutocompleteCtrl 被放置为自动完成范围的属性.

The $mdAutocompleteCtrl is placed as a property on the autocomplete's scope.

首先，您需要访问自动完成元素.一种方法是在自动完成上放置一个 ID:

First, you need access to the autocomplete element. One way to do that is to put an ID on the autocomplete:

<md-autocomplete id='Auto'
                 md-min-length="1"
                 ng-enter="presEnter();"
                 md-no-cache="true"
                 md-selected-item="selectedItem"
                 md-search-text="searchText"
                 md-items="item in querySearch(searchText)"
                 md-item-text="item.name"
                 placeholder="Search for a vegetable">

然后您可以使用该元素来获取自动完成的内部范围.由于自动完成元素本身在您提供的范围内，因此您需要获取自动完成的子元素之一的范围.

Then you can use that element to get the inner scope of the autocomplete. Because the autocomplete element itself is on the scope that you provided, you'll want to get the scope of one of the autocomplete's child elements.

$scope.presEnter = function(e){
    var autoChild = document.getElementById('Auto').firstElementChild;
    var el = angular.element(autoChild);
    el.scope().$mdAutocompleteCtrl.hidden = true;
};

这是一个工作示例:http://codepen.io/anon/pen/rVPZKN?editors=101

这篇关于Angular Material:md-autocomplete - 如何在 Enter 事件中隐藏 md-autocomplete-suggestions?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！