Show a success / failure message without referencing divs by ID in AngularJS

Question

I'm using AngularJS to make a simple form to add a new record to a database. So I have the form submitting via ajax in the controller and it successfully adds a new record.

My question is, what is the Angular way to show a success confirmation to the user. If this was vanilla JS I would just make the form hidden and at the same time make a previously hidden success message appear. Then fade the message out and the form back in after a few seconds.

Is there a better way to do this in Angular? besides $('form#myForm').hide() and $('div#successMessage').show()?

Answer 1

You can use the ngShow directive to accomplish this. If, for example, you set $scope.submissionSuccess to true after a successful submission, you could put something like this in your template:

<div ng-show="submissionSuccess">It worked!</div>

Answer 2

Is there a better way to do this in Angular? besides $('form#myForm').hide() and $('div#successMessage').show()?

Yes, you can use ng-show or ng-hide.

Lets say you have some method getRunningState() that returns integer from 1 to 4 based on some state. So we can write like:

 <span ng-show="getRunningState() == 1">Running...</span>
 <span ng-show="getRunningState() == 2">Paused</span>
 <span ng-show="getRunningState() == 3">Stopped</span>
 <span ng-show="getRunningState() == 4">Finished!</span>

In this case only one from 4 options will be shown

As a side note

If you interesting to put success/failure into dialog box (for my view seems pretty good), here is example based on:

• bootstrap's CSS
• ui-bootstrap

function DialogDemoCtrl($scope, $dialog, $http){

  // Inlined template for demo
  var t = 
          '<div class="modal-body">'+
          '<div class="alert alert-success" ng-show="true">'+
'   <button type="button" class="close" data-ng-click="close(result)" >x</button>'+
'   <strong>Done!</strong> {{successTextAlert}}'+
' </div></div>';

     $scope.successTextAlert = "Some content";
     $scope.showSuccessAlert = true;     


  $scope.opts = {
    backdrop: true,
    keyboard: true,
    backdropClick: true,
    template:  t, // OR: templateUrl: 'path/to/view.html',
    controller: 'TestDialogController',
    resolve: {}
  };

  $scope.openDialog = function(){

    $scope.opts.resolve.successTextAlert = function() {
            return angular.copy($scope.successTextAlert);
        }

         $scope.opts.resolve.showSuccessAlert = function() {
            return angular.copy($scope.showSuccessAlert);
        }

    var d = $dialog.dialog($scope.opts);
    d.open().then(function(result){
      if(result)
      {
        alert('dialog closed with result: ' + result);
      }
      else{
        alert('dialog closed');
      }
    });
  };

}

In my case I show "success" (bootstrap)

Demo Plunker

You can change dialog type / color by changing only one row:

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>