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

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文档

例:

<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指令内置了对此的支持.在这里查看更多.

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

老答案如下:

ng-model没有内置选项来改变这种行为,但你可以编写一个自定义指令来完成它.@Gloopy 为另一个问题写了这样的指令.你可以在这里看一下小提琴.

该指令从每次击键后触发更新的事件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();
              }
          });
      }
  };
})