Question

代码：

<input type="text" ng-modal="name" />
{{name}}

当我在input输入内容时，以下{{name}}会立即更改。能够配置它只在我输入所有字符并保留输入后更新name吗？

Answer 1

这是关于AngularJS的最新补充，作为未来的答案。

Angular更新版本（现在在1.3测试版中），AngularJS本身支持此选项，使用ngModelOptions，如

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

NgModelOptions docs

示例：

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

Answer 2

<强>更新

正如许多人所提到的，Angular现在使用ng-model-options指令内置了对此的支持。查看更多here。

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

以下旧答案：

ng-model没有内置选项来改变这种行为，但是你可以编写一个自定义指令来完成它。 @Gloopy写了一个类似for another question的指令。你可以看一下小提琴here。

该指令从input和keydown事件中取消注册，这些事件会在每次击键后触发更新。

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

更新

更新了使用最新稳定AngularJS（写作时为1.2.16）的小提琴，而不是直接在github上引用主版本。

还添加了显式优先级，以便在ng-model之后运行该指令，以确保正确更改事件侦听器。

Answer 3

更好的选择是使用ng-model-options：

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

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

如何让ng-model不立即更新？

4 个答案: