1. 程式人生 > >【Angular】JS事件--實現回車觸發的效果

【Angular】JS事件--實現回車觸發的效果

前言

  小編在接觸Angular的專案過程中,真得是邊除錯專案bug,邊探索邊成長著。下面小編將使用Angular js中的事件,實現回車觸發的效果。

一、第一種嘗試使用keydown

   這種方法,使用的是ngForm的方法,與元件typeScript檔案中的資料和方法進行響應。

 <input class="form-control "  type="text" [(ngModel)]="info"  (keydown)="query(searchbox.value)" style="display:inline;width:90%" placeholder="字典編碼或管理內容進行搜尋"
#searchbox>

  這個方法太靈活了,決定換個方法。

二、使用Angular JS回車事件觸發

   這種方法,呼叫的是HTML中的input中的方法ng-keyup激發js事件,然後再使用JavaScript事件呼叫元件typeScript檔案的方法;

 <input class="form-control " type="text" [(ngModel)]="info" ng-keyup="enterEvent($event)" style="display:inline;width:90%"
        placeholder="字典編碼或管理內容進行搜尋"
#searchbox />
<script type="text/javascript">
  var app = angular.module('myApp', [])
    .controller('ctrl', function ($scope) {

      $scope.enterEvent = function (e) {
        var keycode = window.event ? e.keyCode : e.which;
        if (keycode == 13) {
          query(searchbox.value);
        }
      }

    });
</script>

小結

  自己對於Angular JS事件以及其他方面的基礎知識,瞭解得不是很多,還需要後期的繼續積累。
感謝您的訪問!