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

发生这种情况是因为您的布尔变量最初的值为undefined，因此该条件成立：

!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>