Show success / failure message without referencing div by ID in AngularJS

Question

I use AngularJS to create a simple form to add a new record to the database. Therefore, I have a submit form via ajax in the controller, and it successfully adds a new record.

My question is: what is Angular's way of showing success confirmation to the user. If it were vanilla JS, I would just make the form hidden and at the same time a message would appear about hidden success. Then, after a few seconds, wipe the message and return the form.

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

Answer 1

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

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

Suppose you have a getRunningState() method that returns an integer from 1 to 4 based on some state. Therefore, we can write, for example:

  <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 of the 4 parameters will be displayed.

As an additional note

If you are interested in putting success / failure in a dialog box (for my presentation it seems pretty good), here is an example based on:

• bootstrap CSS
• u-boot

 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 the type / color of the dialog by changing only one line:

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

Answer 2

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

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