ng-show und ng-hide funktioniert nicht wie erwartet

Question

Ich habe ng-show und ng-hides in meinem Code in Konflikt, um nur das eine oder andere in einer einfachen Form zu zeigen.

1) Allerdings habe ich gesehen, dass die ng-show, ng-hide nicht ausgewertet wird, wenn das Formular geladen und beide widersprüchlichen Elemente angezeigt werden.

2) Nachdem ich mit dem Ausfüllen des Formulars begonnen habe und nachdem nur eins aktiviert ist, wenn ich eine Formulareingabe rückgängig machen und leer machen wollte, wird ng-show oder ng-hide nicht neu berechnet.

See: 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) Wenn die Seite geladen beide „FEHLT DETAILS“ und „WEITER“ angezeigt, wenn nur sollte man 2) Starten Sie nun Eingang in das Formular eingeben, „wie erwartet WEITER "verschwindet, bis das Formular vollständig ausgefüllt ist. Dann wird "CONTINUE" wie erwartet angezeigt und "MISSING DETAILS" verschwindet. Allerdings würde ich an dieser Stelle, wenn Sie den "Namen" oder "Shoutout Nachricht" löschen/löschen, erwarten, dass "MISSING DETAILS" erscheint, während "WEITER" verschwindet, aber das passiert einfach nicht.

Zum Debuggen habe ich eine Variable $ scope.abc hinzugefügt und es scheint nicht so wie ich es erwarte ausgewertet zu werden.

Was fehlt mir?

Answer 1

Für den Anfang sollten Sie $ scope.formData in Ihrem Controller definieren:

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

Dann können Sie Ihre Funktion tun einfach eine truthy Prüfung auf seine Eigenschaften:

$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; 
    }