У AngularJS возникли проблемы с обратной связью пользователя в шаблоне.

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 является начальной загрузкой 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 

но это хорошо работает, когда пользователь отправляет сообщение об ошибке, он получает сообщение об ошибке с цветом опасности, и если он успешно публикует сообщение, он получает сообщение об успехе с цветом succcess

Единственная проблема в том, что, если ошибка происходит или нет, происходит успех или нет, он всегда показывает цвет опасности без текста по умолчанию, почему? но когда происходит ошибка или происходит успех, он хорошо работает.

Надеюсь, вы получили мою проблему.

вот вам скриншот:

это всегда существует, но если возникает ошибка, она работает хорошо, здесь вы видите второй скриншот:

У меня проблема с первым предоставленным скриншотом, и я не понимаю, почему это происходит

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>