ng-show 및 ng-hide가 예상대로 작동하지 않습니다.

Question

단순한 형태로 하나 또는 다른 것을 표시하기 위해 코드에서 ng-show 및 ng-hides가 충돌합니다.

1) 그러나 ng-show, ng-hide는 양식이로드되고 충돌하는 두 항목이 표시 될 때 평가되지 않는 것으로 나타났습니다.

2) 양식 채우기를 시작한 후 단 하나만 활성화 한 후에 양식 입력을 백 스페이스하여 공백으로두면 ng-show 또는 ng-hide가 다시 평가되지 않습니다.

참조 : http://plnkr.co/edit/gZEmwGtcs6PbUpXAvv5o?p=preview

<div class="shoutout-button shoutout-button-disable" ng-hide="enableSO()">MISSING DETAILS</div> 
    <div class="shoutout-button" ng-show="enableSO()">CONTINUE</div> 

    $scope.enableSO = function() { 
     var returnData = false; 
     if ($scope.formData.stuName.length && $scope.formData.school && $scope.formData.name.length && 
      $scope.formData.email && $scope.formData.email.length && $scope.formData.message.length) { 
       returnData = true; 
     } 
     $scope.abc = returnData; 
     return returnData; 
    } 

1) 페이지가로드 모두 "계속"예상대로 하나만 2) 이제 양식에 입력을 입력하기 시작하면, "계속해야 할 때 표시"세부 사항을 MISSING "와 "양식이 완전히 채워질 때까지 사라집니다. 그런 다음 예상대로 "계속"이 나타나고 "세부 사항 누락"이 사라집니다. 그러나이 시점에서 "이름"또는 "shoutout 메시지"를 지우거나 지우려는 경우 "계속 누락"이라는 메시지가 나타나기를 기다리는 중 "계속"이라는 메시지가 사라지지만 실제로는 나타나지 않습니다.

디버깅을 위해 $ scope.abc 변수를 추가했으며 기대했던대로 평가되지 않습니다.

무엇이 누락 되었습니까?

우선 들어

Answer 1

, 당신은 당신의 컨트롤러에서 $ scope.formData을 정의해야합니다 :

$scope.formData = { 
     stuName: null, 
     school: null, 
     name: null, 
     email: null, 
     message: null 
    }; 

그런 다음 함수가 속성에 truthy 확인을 간단하게 할 수 있습니다

$scope.enableSO = function() { 
     var returnData = false; 
     if ($scope.formData.stuName && $scope.formData.school && $scope.formData.name && 
     $scope.formData.email && $scope.formData.message) { 
     returnData = true; 
     } 
     $scope.abc = returnData; 
     return returnData; 
    }