ng-show and ng-hide not working as expected

Question

I have conflicting ng-show and ng-hides in my code to show only one or the other in a simple form.

1) However I have seen that the ng-show, ng-hide does not seem to be evaluated when the form loads and both conflicting items are shown.

2) After I do start filling the form and after only one activates, if I were to backspace a form input and make it blank, the ng-show or ng-hide does not revaluate.

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) When the page loads both "MISSING DETAILS" and "CONTINUE" show up when only one should 2) Now start typing input into the form, as expected "CONTINUE" disappears until the form is completely filled. Then as expected "CONTINUE" appears and "MISSING DETAILS" disappear. However at this point if you were to erase/blank out the "name" or "shoutout message" I am expecting "MISSING DETAILS" to appear while "CONTINUE" to disappear, but that simply does not happen.

For debugging I have added a $scope.abc variable and it does not seem to be evaluated the way I am expecting it to.

What am I missing?

It seems that the form values are undefined while in the 'enable SO' function according to the console. — Dean, Oct 16 '17 at 19:32

score 0 · Answer 1 · answered Oct 16 '17 at 19:34

For starters, you should define $scope.formData in your controller:

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

Then your function can simply do a truthy check on it's properties:

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

ng-show and ng-hide not working as expected

1 Answers1