仅在按键输入时更新AngularJS ng-model？

Question

我有一个用于搜索的输入字段:

<input id="search_input" type="text" ng-model="filter.search_terms">

我还使用了许多其他过滤器(复选框,收音机等),我在过滤器上有一个$ watch,所以任何更改都会触发搜索.问题是我不希望每次输入一个字母时都要搜索文本字段,只希望只有在按Enter键时才将其"保存"在filter.search_terms上.

是否有一种简单的方法可以执行此操作,还是必须删除ng-model并使用将其设置为输入的功能进行ng-click？

Answer 1

您可以尝试添加ng-model-options="{updateOn : 'change blur'}"到输入标记.应该管用.

Answer 2

这里的答案似乎都没有完全回答这个问题.问题是如何让模型仅在按下回车时更新.我确信原来的海报已经开始了,但是对于其他可能会发现这个问题的海报,我会添加我的方法.我认为ninjaPixel得到了最接近的.我的回答是基于他的指示.

但缺少的是防止默认的ng-model指令在其他情况下更新.为此,我在输入上添加了一个选项来更新keyup:

ng-model-options="{updateOn: 'keyup'}"

这将覆盖输入事件(对于文本字段)更新的默认值,并强制更新在keyup上进行.这允许我们的指令通过在我们的自定义键盘处理程序中停止事件传播来阻止原始ng-model指令的默认操作:

if (ev.keyCode !== 13) return ev.stopImmediatePropagation();

可以在这里找到一个工作的codepen:http://codepen.io/jessehouchins/pen/MbmEgM

Answer 3

您可以通过创建一个名为的指令updateOnEnter然后将此属性添加到HTML元素来实现此行为.

<input id="search_input" type="text" update-on-enter ng-model="filter.search_terms">

angular.module('app').directive('updateOnEnter', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
            element.on("keyup", function(ev) {
                if (ev.keyCode == 13) {
                    ctrl.$commitViewValue();
                    scope.$apply(ctrl.$setTouched);
                }
            });
        }
    }
});