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

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

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