Обновить AngularJS ng-model только при нажатии клавиши?

У меня есть это поле ввода, которое я использую для поиска:

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

Есть много других фильтров, которые я использую (флажки, радио и т.д.), и у меня есть фильтр $watch on filter, поэтому любые изменения будут запускать поиск. Проблема в том, что я не хочу, чтобы поиск запускался для текстового поля каждый раз, когда я печатаю письмо, и хочу только "сохранить" его на filter.search_terms только после нажатия клавиши ввода.

Есть ли простой способ сделать это или мне нужно удалить ng-модель и сделать ng-click с помощью функции, которая устанавливает его при вводе?

ОТВЕТЫ

Ответ 1

Вы можете попробовать добавить ng-model-options="{updateOn : 'change blur'}" в свой тег ввода. Должен работать.

Ответ 2

Ни один из ответов здесь, похоже, не полностью отвечает на вопрос. Вопрос состоял в том, как заставить модель обновлять ТОЛЬКО при нажатии enter. Я уверен, что исходный плакат продвинулся, но для других, кто может это найти, я добавлю свой подход. Я думаю, что ninjaPixel получил самое близкое. Мой ответ основан на его директиве.

Однако недостающий элемент не позволяет директиве ng-model по умолчанию обновляться в других случаях. Чтобы сделать это, я добавил параметр для ввода для обновления на клавиатуре:

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

Это переопределяет значение по умолчанию, которое обновляет входные события (для текстовых полей) и заставляет обновление возникать при активации клавиатуры. Это позволяет нашей директиве предотвращать исходное действие по умолчанию для ng-model, останавливая распространение события в нашем пользовательском обработчике ключей:

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

Рабочий код можно найти здесь: http://codepen.io/jessehouchins/pen/MbmEgM

Ответ 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);
                }
            });
        }
    }
});