Question

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

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

我还使用了许多其他过滤器（复选框，收音机等），我在过滤器上有一个$ watch，所以任何更改都会触发搜索。问题是我不希望每次输入一个字母时搜索都会触发文本字段，并且只有在我按下回车键时才希望它将它“保存”在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();

可以在此处找到工作的代码：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);
                }
            });
        }
    }
});

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

3 个答案: