使用Angular在Enter键上调用查询过滤器

Invoke query filter on Enter using Angular

本文关键字：调用 查询 过滤器 Angular Enter 使用      更新时间：2023-09-26

我对AngularJS比较陌生，我正在尝试构建一个简单的威士忌搜索应用程序。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>

任何帮助都将非常感激!

您可以使用 ngModelOptions 

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

这对你有帮助吗?如何在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)'}"/>
相关文章：