Как разрешить ng-model не обновляться сразу?

Ответ 1

Обновление

Как уже упоминалось, Angular теперь имеет встроенную поддержку для этого, используя директиву ng-model-options. Подробнее здесь.

<input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}" />

Старый ответ ниже:

Нет встроенной опции для ng-модели, чтобы изменить это поведение, но вы можете написать свою собственную директиву. @Gloopy написал такую ​​директиву для другого вопроса. Вы можете посмотреть на скрипку здесь.

Директива отменяет регистрацию событий input и keydown, которые запускают обновление после каждого нажатия клавиши.

<input type="text" ng-model="name" ng-model-onblur />

Update:

Обновлен скрипт для использования последней стабильной версии AngularJS (1.2.16 на момент написания) вместо прямого ссылки на главную версию в github.

Также добавлен явный приоритет, чтобы директива запускалась после ng-model, чтобы обеспечить корректное изменение прослушивателей событий.

Ответ 2

Это касается недавних дополнений к AngularJS, чтобы служить в качестве будущего ответа.

Angular более новые версии (теперь в 1.3 beta), AngularJS поддерживает эту опцию, используя ngModelOptions, например

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

Документы NgModelOptions

Пример:

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />

Ответ 3

Лучше использовать ng-model-options:

<input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}" />

Ответ 4

Рабочий директивный код (ng-1.2RC3): использовать:   ng-model-onblur

.directive('ngModelOnblur', function () {
  return {
      restrict: 'A',
      require: 'ngModel',
      priority: 1,
      link: function (scope, element, attrs, ngModelCtrl) {
          if (attrs.type === 'radio' || attrs.type === 'checkbox') { return; }
          var update = function () {
              scope.$apply(function () {
                  ngModelCtrl.$setViewValue(element.val().trim());
                  ngModelCtrl.$render();
              });
          };
          element.off('input').off('keydown').off('change').on('focus', function () {
              scope.$apply(function () {
                  ngModelCtrl.$setPristine();
              });
          }).on('blur', update).on('keydown', function (e) {
              if (e.keyCode === 13) {
                  update();
              }
          });
      }
  };
})