AngularJS在向用户提供反馈方面存在麻烦

Question

这个问题已经在这里有了答案：

• AngularJS以智能方式处理$ http错误/成功 1回答

我有一个表格，当用户成功提交内容时，他们会收到一条成功消息！ 如果同一用户提交错误，则会收到错误消息。

但是问题是：当用户收到成功消息时，即使以后收到错误消息，该消息也始终存在于屏幕上。 我的意思是，它同时显示错误和成功消息。

我想要出现成功消息时，错误消息应该消失。

这是我的片段：

$http.post('http://127.0.0.1:8000/api/v1/contact/', $scope.formModel)
        .then(function(response) {
            $scope.successCallBack = 'You have successfully saved your contact';
        }, function(response){
            $scope.errorCallBack = 'an error occured'
        });

我希望你能解决我的问题：

在这里您可以看到我如何在模板上使用此消息：

<div class="alert alert-success" ng-if="successCallBack">
  <p> {{ successCallBack }} </p>
</div>

<div class="alert alert-danger" ng-if="errorCallBack">
  <p>  {{ errorCallBack }} </p>

</div> 

我该如何解决这个问题？

Answer 1

您只需要一个布尔值和一个字符串即可：

$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';
    }, function(response){
        $scope.saveSuccess = false;
        $scope.message = 'an error occured';
    });

在模板中，您可以使用ng-if：

<div class="alert alert-success" ng-if="saveSuccess">
  <p> {{ message}} </p>
</div>

<div class="alert alert-danger" ng-if="!saveSuccess">
  <p>  {{ message}} </p>

</div> 

或者您可以像这样简单地使用ng-class：

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

编辑：您可能需要另一个布尔值，以便知道何时提交表单以显示成功或错误消息，例如formSubmitted