AngularJS在$ http反馈模板时遇到麻烦

Question

我的代码段目前运行良好。它的工作原理是，如果用户提交了一些错误，他会收到一条错误消息，如果他成功提交了，他将会收到一条成功消息，它的工作原理很好，没问题。

首先查看我当前的代码段：

$scope.onSubmit = function () {
      $http.post('http://127.0.0.1:8000/api/v1/contact', $scope.formModel)
      .then(function(response) {
        $scope.saveSuccess = true;
        $scope.message = 'You have successfully saved your contact';
        $scope.contacts.push(response.data);
      }, function(response) {
        $scope.saveSuccess = false;
        $scope.message = 'an error occurs';
      });
  };

在这里，您将看到我如何在模板上使用它： 注意：css是bootstrap clss。

<div class="alert" ng-class="{ 'alert-success': saveSuccess, 'alert-danger': !saveSuccess }">
          <p> {{ message }} </p>
</div> 

My problem is, when i visit the page, it always shows me an danger color with no message 

但是当用户提交错误时，它会很好地工作，他们会收到带有危险颜色的错误消息，如果用户成功发布，则会获得带有成功颜色的成功消息

唯一的问题是，无论是否发生错误，是否都成功，默认情况下总是显示没有文字的危险颜色，为什么？但是当错误发生或成功发生时，它的工作方式很好。

希望您能解决我的问题。

在这里获取屏幕快照：

这始终存在，但是如果发生错误，则效果很好，在这里您可以看到第二张屏幕截图：

我提供的第一个屏幕截图有问题，我不知道为什么会发生

Answer 1

之所以会发生这种情况，是因为您的布尔变量最初具有未定义的值，所以这种情况变为真：

!saveSuccess

提交表单时，您将需要设置另一个布尔值（在finally块中添加，在两种情况下均成功/失败时触发）：

$scope.onSubmit = function () {
  $http.post('http://127.0.0.1:8000/api/v1/contact', $scope.formModel)
  .then(function(response) {
    $scope.saveSuccess = true;
    $scope.message = 'You have successfully saved your contact';
    $scope.contacts.push(response.data);
  }, function(response) {
    $scope.saveSuccess = false;
    $scope.message = 'an error occurs';
  }).finally(function() {
    $scope.submitted = true;
});

};

并在ng-if条件下将其添加到模板中：

 <div ng-if="submitted" class="alert" ng-class="{ 'alert-success': saveSuccess, 'alert-danger': 
 !saveSuccess }">
          <p> {{ message }} </p>
</div>