Update AngularJS ng-model only on keypress enter?

Question

I have this input field I am using for a search:

There are man

Answer 1

Neither of the answers here seem to fully answer the question. The question was how to get the model to ONLY update on pressing enter. I'm sure the original poster has moved on, but for others who may find this, I'll add my approach. I think ninjaPixel got the closest. My response is based off of his directive.

The missing piece however is preventing the default ng-model directive from updating in other cases. To do that, I added an option to the input to update on keyup:

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

This overrides the default which updates on input events (for text fields) and forces the update to occur on keyup. This allows our directive to prevent the original ng-model directive's default action by stopping event propagation in our custom keyup handler:

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

A working codepen can be found here: http://codepen.io/jessehouchins/pen/MbmEgM

Answer 2

You can try adding ng-model-options="{updateOn : 'change blur'}" to your input tag. Should work.

Answer 3

You can achieve this behaviour by creating a directive called updateOnEnter and then adding this attribute to your HTML element.

<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);
                }
            });
        }
    }
});