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

Posted 2023-02-23

【中文标题】如何让 ng-model 不立即更新？

【英文标题】：How to let ng-model not update immediately?

【发布时间】：2013-01-21 06:25:51

【问题描述】：

代码：

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

当我在input 中输入内容时，下面的name 将立即更改。是否可以配置它只在我输入所有字符并离开输入后更新name？

【问题讨论】：

Angularjs: input[text] ngChange fires while the value is changing 的可能重复项

【参考方案1】：

更新

正如许多人所提到的，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 之后运行，以确保正确更改事件侦听器。

【讨论】：

小提琴没有按预期工作。它会在您键入时更新

注意：Angular 现在已经内置了对此的支持。 docs.angularjs.org/api/ng/directive/ngModelOptions

如果有办法将接受的答案更改为@manikanta，那就太好了。

【参考方案2】：

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

Angular 较新的版本（现在在 1.3 beta 中），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 " />

【讨论】：

它在 1.3 beta 5 中无法正常工作，但在当前主版本 2602 中已修复

任何使用 1.2 版本的选项？因为小提琴人们发布的关于覆盖输入元素的帖子不再起作用了。

与当前的 beta 版本 (1.3.0-beta-13) 一起正常工作

注意：“默认”和“模糊”是 2 个单独的选项。将它们都指定为“默认”，而不是“模糊”（v1.3）

那是因为我喜欢 Angular :D

【参考方案3】：

工作指令代码（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();
              
          );
      
  ;
)

【参考方案4】：

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

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

【讨论】：

然而，这种“正确”方式仅适用于不再支持 ie8 的较新版本的 Angular ......在许多开发环境中是一种杀手：/

你应该简单地杀死 IE8。谷歌在 2012 年放弃了支持。

我在一个表单中的两个字段（用户和密码）有同样的问题，我想在点击登录按钮而不是模糊或输入字符时更新，我的问题是每次 ng-型号更新 iphone 将页面滚动到顶部

@s.Daniel +1。如果世界继续支持过去的 IE，世界最终可能会使用 W95