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）ページのロードが両方の "CONTINUE" 予想通り一つだけが 2）今のフォームに入力の入力を開始し、「続けるべきときに表示 "DETAILSをMISSING" とフォームが完全に埋まるまで消えます。その後、期待通りに "CONTINUE"と表示され、 "MISSING DETAILS"が消えます。しかし、この時点で、「名前」または「shoutoutメッセージ」を消去/空白にする場合は、「CONISNUE」が消えている間に「MISSING DETAILS」が表示されることを期待していますが、それは単に起こりません。

デバッグでは、$ 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; 
    }