使用Angular調用Enter輸入查詢過濾器

Question

我對AngularJS比較陌生，我試圖構建一個簡單的Whiskey搜索應用程序。 Angular可以很容易地綁定一個輸入元素和我的結果，但是結果按照用戶輸入的方式進行過濾。我不希望過濾器發生，直到用戶點擊Enter。

這裏是我所輸入的搜索代碼：

<input type="text" class="form-control" placeholder="start typing and hit enter" ng-model="query"> 

這裏是我的結果：

<div class="col-lg-12" ng-controller="WhiskeyListCtrl"> 
     <div class="row"> 
      <div class="col-sm-3" ng-repeat="whiskey in whiskeys | filter:query"> 
       <div class="whiskey-container"> 
        <a href="#/whiskeys/{{whiskey.id}}"><img ng-src="{{whiskey.images[0]}}" height="200" width="200"/></a> 
        <whiskey-title></whiskey-title> 
        <whiskey-desc></whiskey-desc> 
       </div> 
      </div> 
     </div> 
    </div> 

任何幫助將不勝感激！

Answer 1

您可以使用ngModelOptions

<input type="text" class="form-control" placeholder="start typing and hit enter" ng-model="query" ng-model-options="{updateOn : 'change blur'}"> 

Answer 2

這是否對您有所幫助？ How to use a keypress event in AngularJS?

看這個用戶名Rodolfo Jorge Nemer Noguieria：

另一種簡單的選擇：

<input ng-model="edItem" type="text" 
    ng-keypress="($event.which === 13)?foo(edItem):0"/> 

而NG-UI選擇：

<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>