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）现在开始输入输入形式，如预期“继续“消失，直到表格完全填满。然后如预期的那样出现“CONTINUE”并且“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; 
    }