ng-enter事件未在md-item-template中触发

时间:2019-02-25 21:19:52

标签: javascript angularjs

我正在尝试从md-autcomplete触发ng-enter事件。 目的是当我在自动完成下拉菜单项上使用键盘时,应调用一个函数。 这是html代码

<html lang="en">

<head>
  <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
  <meta name="viewport" content="initial-scale=1" />
</head>

<body layout="column">
  <div ng-app="chipsCustomInputDemo" ng-controller="CustomInputDemoCtrl" layout="column">
    <md-content layout-padding class="autocomplete" layout="column">
      <form>
        <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">
          <span md-highlight-text="searchText">{{item.name}} :: {{item.type}}</span>
        </md-autocomplete>
        <md-item-template>
          <span ng-enter="sayHi()">
          <strong>{{item.name}}</strong>

        </span>
        </md-item-template>
      </form>
      <br />

      <div class="md-2-line" ng-repeat="veg in vegetables">
        <h3>{{veg.name}}</h3>
        <p>{{veg.type}}</p>
        <hr />
      </div>
    </md-content>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>

  <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>

</body>

</html>

完整的代码在这里:

https://codepen.io/mahita_mandy/pen/BbaRZa?editors=1011

0 个答案:

没有答案