Cập nhật AngularJS ng-model chỉ khi nhấn phím enter?

Question

Tôi có lĩnh vực này đầu vào Tôi đang sử dụng cho một tìm kiếm:

<input id="search_input" type="text" ng-model="filter.search_terms"> 

Có rất nhiều bộ lọc khác tôi sử dụng cũng như (hộp kiểm, radio, vv) và tôi có một $ đồng hồ trên bộ lọc vì vậy bất kỳ sự thay đổi sẽ cháy một tìm kiếm. Vấn đề là tôi không muốn tìm kiếm lửa cho trường văn bản mỗi khi tôi nhập một chữ cái và chỉ muốn nó "lưu" nó trên filter.search_terms chỉ khi tôi nhấn enter.

Có cách nào dễ dàng để thực hiện việc này không hoặc tôi có phải xóa mô hình ng và nhấp chuột vào một chức năng đặt chức năng nhập không?

Answer 1

Bạn có thể thử thêm ng-model-options="{updateOn : 'change blur'}" vào thẻ đầu vào của mình. Nên làm việc.

Answer 2

Bạn có thể đạt được hành vi này bằng cách tạo chỉ thị có tên updateOnEnter và sau đó thêm thuộc tính này vào phần tử HTML của bạn.

<input id="search_input" type="text" update-on-enter ng-model="filter.search_terms"> 

angular.module('app').directive('updateOnEnter', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ctrl) { 
      element.on("keyup", function(ev) { 
       if (ev.keyCode == 13) { 
        ctrl.$commitViewValue(); 
        scope.$apply(ctrl.$setTouched); 
       } 
      }); 
     } 
    } 
}); 

Answer 3

Không có câu trả lời nào ở đây dường như trả lời đầy đủ câu hỏi. Câu hỏi đặt ra là làm thế nào để có được mô hình CHỈ cập nhật khi nhấn enter. Tôi chắc chắn rằng các poster ban đầu đã di chuyển trên, nhưng đối với những người khác có thể tìm thấy điều này, tôi sẽ thêm cách tiếp cận của tôi. Tôi nghĩ rằng ninjaPixel có gần nhất. Phản ứng của tôi dựa trên chỉ thị của anh ta.

Phần bị thiếu tuy nhiên đang ngăn chỉ thị ng-model mặc định cập nhật trong các trường hợp khác. Để làm điều đó, tôi đã thêm một tùy chọn để đầu vào để cập nhật trên KeyUp:

ng-model-options="{updateOn: 'keyup'}" 

này ghi đè mặc định mà cập nhật về các sự kiện đầu vào (đối với lĩnh vực văn bản) và buộc bản cập nhật xảy ra trên KeyUp. Điều này cho phép chỉ thị của chúng tôi để ngăn chặn hành động mặc định ng-mô hình ban đầu chỉ thị của bằng cách ngăn chặn lan truyền sự kiện trong handler KeyUp tùy chỉnh của chúng tôi:

if (ev.keyCode !== 13) return ev.stopImmediatePropagation(); 

Một làm việc codepen có thể được tìm thấy ở đây: http://codepen.io/jessehouchins/pen/MbmEgM