Làm thế nào để cho mô hình ng không cập nhật ngay lập tức?

Question

Code:

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

Khi tôi vào một cái gì đó vào input, các {{name}} sau sẽ thay đổi ngay lập tức. Có thể cấu hình nó chỉ cập nhật các name sau khi tôi nhập tất cả các ký tự và để lại đầu vào?

Answer 1

Cập nhật

Như nhiều người đã đề cập ở góc hiện nay đã được xây dựng trong hỗ trợ cho điều này bằng cách sử dụng chỉ thị ng-model-options. Xem thêm here.

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

Cũ câu trả lời dưới đây:

Không có built-in tùy chọn cho ng-mô hình để thay đổi hành vi đó, nhưng bạn có thể viết một chỉ thị tùy chỉnh làm việc đó. @Gloopy đã viết một chỉ thị như vậy for another question. Bạn có thể xem fiddle here.

Chỉ thị hủy đăng ký khỏi các sự kiện input và keydown kích hoạt cập nhật sau mỗi lần nhấn phím.

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

Cập nhật:

fiddle cập nhật để sử dụng AngularJS ổn định mới nhất (1.2.16 như các văn bản), thay vì trực tiếp tham khảo phiên bản thạc sĩ tại github.

Cũng thêm một mức độ ưu tiên rõ ràng để chỉ thị được chạy sau ng-model để đảm bảo người nghe sự kiện được thay đổi chính xác.

Answer 2

Đây là phần bổ sung gần đây cho AngularJS, để phục vụ như câu trả lời trong tương lai.

phiên bản góc mới (bây giờ trong 1.3 beta), AngularJS natively hỗ trợ tùy chọn này, sử dụng ngModelOptions, như

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

NgModelOptions docs

Ví dụ:

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

Answer 3

Làm việc đang chỉ thị (ng-1.2RC3): sử dụng: 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

Một lựa chọn tốt hơn là sử dụng các ng-mô hình lựa chọn:

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