programing

Angular JS는 왜 생겨요?$prinstein은 직접 JS 조작으로 변경되지 않음

codeshow 2023. 10. 14. 10:45
반응형

Angular JS는 왜 생겨요?$prinstein은 직접 JS 조작으로 변경되지 않음

Angular JS prinestine 설정을 테스트하여 버튼의 enable/disable 속성과 같은 폼 항목의 표시를 조정하고자 합니다.

클릭 이벤트가 발생하면 폼의 원래 값이 예상대로 변경되지만 스코프 변수를 직접 조작하면 폼의 컨트롤이 해당 변수에 바인딩되어 있어도 폼의 원래 설정이 변경되지 않습니다.

다음 Jsfiddle을 참조하십시오.

http://jsfiddle.net/nicholasporter/2h7wT/3/

부울 값을 변경하면 컨트롤이 스코프 변수에 바인딩될 때 폼의 초기 설정이 변경될 것으로 예상됩니다.이것을 테스트하는 더 좋은 방법이 있습니까?양식에 변경된 사항이 없을 때 버튼이나 다른 DOM 요소를 조정하는 더 나은 방법이 있습니까?어떤 조언이든 미리 감사드립니다.Js fiddle이 작동하지 않을 경우의 코드는 여기 있습니다.

 <div ng-app ng-controller="MyCtrl">
    <form novalidate name="myForm">
    {{myBool}}

      <input type="checkbox" ng-model="myBool" />
      <button ng-click="myBool=!myBool">JS set</button>
        <div>Form Pristine:{{myForm.$pristine}}</div>
    </form>
  </div>


<script>
    function MyCtrl($scope){
        $scope.myBool = false;
    }
</script>

$pristine입력의 속성과 함께ng-model지시는 해당 ngModelController가 ngModelController일 때만 변경됩니다.$setViewValue()메소드가 사용됩니다. 즉, 입력 요소에 대한 사용자 상호 작용을 통해 또는 직접 메소드를 호출합니다.

변경 여부를 추적하기 위해 새 상태가 사용되기 때문입니다(수정된 내용).ng-model-) 양식의 입력 요소를 활성화합니다.입력의 값이 모델의 값과 동일하다는 것을 의미하는 것은 아니며, 키 입력 후 항상 업데이트됩니다!양식을 원래대로 자동으로 재설정하는 방법은 없습니다. 전화를 통해 언제 양식을 재설정할지 결정해야 합니다.form.$setPristine().

예제에서 기존 정보를 재설정하려면, 스코프의 함수에 단추를 바인딩하여 자체를 재설정하도록 양식을 지정해야 합니다.

$scope.toggleBool = function() {
  $scope.myBool = !$scope.myBool;
  $scope.myForm.$setPristine();
}

양식과 개체의 원래 상태에 대한 별도의 값 집합을 사용하려면 개체를 복제한 다음 양식에 있는 복제를 사용해야 합니다.그렇지 않으면 모든 변경사항이 항상 즉시 원래 개체를 변경합니다.

그런 다음 원래 개체와 복제 개체를 심층적으로 비교하여 양식의 상태를 확인할 수 있습니다.

업데이트 '15년 5월:이 답변은 2013년에 나온 것입니다. ngModelController는 폼 상태를 관리하기 위한 몇 가지 메커니즘을 제공하는 Angular(현재 1.4)의 최근 버전에서 훨씬풍부한 API를 얻었습니다.

언급URL : https://stackoverflow.com/questions/14838273/why-does-angular-js-form-pristine-not-change-with-direct-js-manipulation

반응형