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）当页面加载“MISSING DETAILS”和“CONTINUE”时，只显示一个“MISSING DETAILS”和“CONTINUE” 2）现在开始在表单中键入输入，正如预期的“CONTINUE”消失，直到表单完全填满。然后按预期显示“CONTINUE”，“MISSING DETAILS”消失。但是，此时如果您要删除/删除“名称”或“shoutout消息”，我希望“CONTINUE”消失时显示“MISSING DETAILS”，但这根本不会发生。

对于调试，我添加了一个$ scope.abc变量，似乎没有像我期望的那样进行评估。

我错过了什么？

Answer 1

对于初学者，您应该在控制器中定义$ scope.formData：

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

然后你的功能可以简单地检查它的属性：

    $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和ng-hide无法按预期工作

1 个答案: