2014-08-27 1 views
15

나는 내가 검색에 사용하고이 입력 필드가 :키 누르기에서만 AngularJS 모델을 업데이트 하시겠습니까?

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

이 (등 체크 박스, 라디오,) 나뿐만 아니라 사용하는 많은 다른 필터가 나는 그래서 어떤 변화가 발광 필터에 $ 시계를 검색. 문제는 문자를 입력 할 때마다 텍스트 필드에 대한 검색을 원하지 않고 filter.search_terms에 한 번만 입력하면됩니다.

쉬운 방법이 있나요? 아니면 ng-model을 제거하고 입력시 설정하는 기능으로 ng-click을해야합니까?

답변

32

입력 태그에 ng-model-options="{updateOn : 'change blur'}"을 추가 할 수 있습니다. 일해야한다.

+3

있다고. 문서 (예 : https://docs.angularjs.org/api/ng/directive/ngModelOptions)에 ng-model-options에 넣을 수있는 목록과 그 목록이 있어야만하는 유일한 사람입니까? 해야 할 것? 왜 "흐림 변경"이 특정한 행동을하는지 분명하지 않습니다. –

+0

IE에서 "enter"키를 누를 때 "change"이벤트가 방출되지 않기 때문에 IE11에서는 작동하지 않습니다. 내가 여기서 일한 방식은 "change"이벤트를 커스텀 "keydown_enter"이벤트로 대체하고 DOM 엘리먼트에서 "keycode === 13"을 가진 "keydown"이 트리거 될 때 "keydown_enter"를내는 지시어를 생성 한 것이다. Fyi –

8

updateOnEnter이라는 지시문을 만든 다음이 특성을 HTML 요소에 추가하면이 동작을 얻을 수 있습니다.

<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); 
       } 
      }); 
     } 
    } 
}); 
+3

키가 올라가 지 않는 한 각도 ** ** 업데이트를 알려주는 내용은 무엇입니까? 나는 그 사건을 본다. 그러나 모델의 정상적인 갱신을 방해하는 것은 무엇인가? – jeremy

+0

도 중복 https://stackoverflow.com/questions/32176130/angular-update-input-value-on-enter-keypress-and-work-in-ie –

+0

@jeremy : 귀하의 질문에 대한 답변은 top comment https : //stackoverflow.com/a/40756181/704246 –

11

여기에 대한 답변 중 어느 것도이 질문에 완전히 대답하지 않습니다. 문제는 enter 키를 누를 때만 모델을 업데이트하는 방법이었습니다. 나는 원래의 포스터가 옮겨 졌을 것이라고 확신하지만, 이것을 찾을 수있는 다른 사람들을 위해, 나는 나의 접근법을 추가 할 것이다. 나는 ninjaPixel이 가장 가까워 졌다고 생각해. 내 답변은 그의 지시문을 기반으로합니다.

그러나 누락 된 부분은 다른 경우에 기본 ng-model 지정 문이 업데이트되지 못하게합니다. 이를 위해, 나는의 keyup에 업데이트 할 입력 옵션을 추가 :이 (텍스트 필드) 입력 이벤트에 업데이트 기본을 무시하고의 keyup에서 발생하는 업데이트를 강제로

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

. 이것은 우리의 지시는 우리의 정의의 keyup 처리기에서 이벤트 전파를 중지하여 원래 NG 모델 지시자의 기본 동작을 방지 할 수 있습니다 :

A는 codepen 워킹
if (ev.keyCode !== 13) return ev.stopImmediatePropagation(); 

는 여기에서 찾을 수 있습니다 : 그것을 http://codepen.io/jessehouchins/pen/MbmEgM