角材料：MD-自动完成 - 如何隐藏Enter事件MD-自动完成，建议？ [英] Angular Material: md-autocomplete - how to hide md-autocomplete-suggestions on Enter event?

问题描述

我 MD-自动完成：

<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-输入

我的目标：：当用户presses 输入我想隐藏 MD-自动完成，建议下拉菜单

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

我从HTML知道我需要以某种方式来调用： $ mdAutocompleteCtrl.hidden = TRUE; ，但不知道如何使用 $ mdAutocompleteCtrl 的控制器。

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

我用Google搜索，发现：

I googled and found:

$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)

我这个例如玩后下拉preSS Enter键。

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 /匿名/笔/ rVPZKN？编辑= 101

Here is a working example: http://codepen.io/anon/pen/rVPZKN?editors=101

这篇关于角材料：MD-自动完成 - 如何隐藏Enter事件MD-自动完成，建议？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！