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

Question

代码：

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

当我输入的东西到input，以下{{name}}将立即改变。在输入所有字符并离开输入之后，它能够配置它只更新name吗？

Answer 1

更新

正如许多人所提到的角如今已经内置支持此使用ng-model-options指令。查看更多here。

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

老如下答案：

有一个为NG-机型没有内置选项来改变这种行为，但你可以写一个自定义指令做。 @Gloopy写了一个像这样的指令for another question。你可以看看小提琴here。

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

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

更新：

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

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

Answer 2

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

角较新版本（在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 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(); 
       } 
      }); 
     } 
    }; 
}) 

Answer 4

一个更好的选择是使用NG-模型选择：

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