如何讓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'}" />