1

Currently my snippet working very awesome except a problem and its balancing with delete and update.

At first have a look at my snippet:

for update snippet:

$scope.updateContact = function (contact) {
    $http.put('http://127.0.0.1:8000/api/v1/contact/' + $scope.clickedContact.id + '/?=format=json', $scope.clickedContact)
    .then(function(response){
      $scope.getAllContact(); // this function will make sure to reload the page after edit
      $scope.editSuccess = true;
      $scope.editFeedback = "You have successfully edited your contact";
    }, function(response){
      $scope.editSuccess = false;
      $scope.editFeedback = 'an error occurred';
    }).finally(function() {
      $scope.editSubmitted = true;
    });
  };

and this is delete snippet

$scope.deleteContact = function function_name() { //it will delete data from table and handle both succcess and error
    $http.delete('http://127.0.0.1:8000/api/v1/contact/' + $scope.clickedContact.id + '/?format=json', $scope.clickedContact)
    .then(function(response){
      $scope.contacts.splice($scope.contacts.indexOf(response.data), 1);
      $scope.deleteSuccess = true;
      $scope.deleteFeedback = 'You have successfully deleted your contact';
    }, function (response){
      $scope.deleteSuccess =false;
      $scope.deleteFeedback = 'Opps ! It seems this contact already deleted';
    }).finally(function() {
      $scope.deleteConfirmed = true;
    });
 };

and this is how i used these message on templates:

<div ng-if="editSubmitted" class="alert" ng-class="{ 'alert-success': editSuccess, 'alert-danger': !editSuccess }">
          <p> {{ editFeedback }} </p>
       </div>

       <div ng-if="deleteConfirmed" class="alert" ng-class="{ 'alert-success': deleteSuccess, 'alert-danger': !deleteSuccess }">
        <p> {{ deleteFeedback }} </p>
      </div>

When i update something successfully or wrongly, the message appear, and when i delete successfully or wrongly, the delete message appear on the screen.

I want: when delete message appear on the screen, the update message should be disappear

likewise, when delete message appear, the update message shouldn't shuldnt exist. i mean, both type of message cant be exist on the screen, one message of any type should appear.

I hope you got it.

Improve this question
1

2 Answers 2

Reset to default
1

you can add an and condition to your ngIf directives.

<div ng-if="editSubmitted && deleteConfirmed == false" class="alert" ng-class="{ 'alert-success': editSuccess, 'alert-danger': !editSuccess }">
    <p> {{ editFeedback }} </p>
</div>

<div ng-if="deleteConfirmed && editSubmitted == false" class="alert" ng-class="{ 'alert-success': deleteSuccess, 'alert-danger': !deleteSuccess }">
    <p> {{ deleteFeedback }} </p>
</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Just add this to the updateContact finally block:

$scope.deleteConfirmed = false;

add to deleteContact finally block add this:

$scope.editSubmitted= false;
Improve this answer

Comments