programing

ng-model이 즉시 업데이트되지 않게 하는 방법은?

lovejava 2023. 10. 6. 20:47

ng-model이 즉시 업데이트되지 않게 하는 방법은?

코드:

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

내가 무언가를 입력할 때input, 다음의{{name}}즉시 변경됩니다.구성할 수 있습니까? 업데이트만 가능합니다.name모든 문자를 입력하고 입력을 남긴 후에?

이것은 AngularJS에 최근 추가된 것들에 대한 것으로, 미래의 해답이 될 것입니다.

Angular 최신 버전(현재 1.3 베타 버전), AngularJS는 기본적으로 다음을 사용하여 이 옵션을 지원합니다.ngModelOptions,맘에 들다

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

NgModel 옵션 문서

예:

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

갱신하다

많은 사람들이 Angular를 언급했듯이, 이제 Angular는 다음을 사용하여 이를 지원합니다.ng-model-options지시의여기서 더 보기.

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

아래의 이전 답변:

ng-model에서 해당 동작을 변경할 수 있는 기본 옵션은 없지만 이를 수행하는 사용자 지정 지침을 작성할 수 있습니다.@글루피는 또 다른 질문을 위해 그렇게 지시문을 썼습니다.여기 바이올린을 보시면 돼요.

명령이 에서 등록을 취소합니다.input그리고.keydown각 키 입력 후 업데이트를 트리거하는 이벤트.

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

업데이트:

github에서 마스터 버전을 직접 참조하는 대신 최신 안정적인 AngularJS(쓰기 기준 1.2.16)를 사용하도록 fiddle을 업데이트했습니다.

또한 지시어가 다음에 실행되도록 명시적 우선 순위를 추가했습니다.ng-model이벤트 청취자가 올바르게 변경되도록 보장합니다.

더 나은 옵션은 ng-model-options를 사용하는 것입니다.

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

작업지시코드(ng-1.2)RC3): 사용: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();
              }
          });
      }
  };
})

언급URL : https://stackoverflow.com/questions/14722577/how-to-let-ng-model-not-update-immediately