How to disappear an alert div after display it

Question

Hi I have an alert div as follows,

<div style="width: 12%;" ng-if="final_data.status =='confirmed'" class="alert alert-success" role="alert" align="left" ng-cloak>
        <span class="glyphicon glyphicon-ok"></span>&nbsp;&nbsp;confirmed</div>

The div will pop-up when the status becomes confirmed. How can I auto hide the div after displaying it? Any idea guys?

Answer 1

You could use javascript to remove it:

setTimeout(function(){
    var elements = document.getElementsByClassName('alert');
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
},500);

Answer 2

Try this:

Change

ng-if

to

ng-hide

And then use timeout on javascript viewmodel/controller:

setTimeout(function{
    final_data.status = 'confirmed' ;
}, 1000);

And this on html:

<div style="width: 12%;" ng-hide="final_data.status=='confirmed'" class="alert alert-success" role="alert" align="left" ng-cloak> <span class="glyphicon glyphicon-ok"></span>&nbsp;&nbsp;confirmed</div>

Happy to Help you

Answer 3

You can watch, when status gets changed to "confirmed" and do something.

<div style="width: 12%;" ng-show="canShow" ng-if="final_data.status =='confirmed'" class="alert alert-success" role="alert" align="left" ng-cloak>
    <span class="glyphicon glyphicon-ok"></span>&nbsp;&nbsp;confirmed</div>


$scope.canShow = true;
$scope.$watch('final_data.status', function (newValue, oldValue)) {
    if(newValue === 'confirmed') {
        $timeout(function() {
            $scope.canShow = false;
        }, 1000);
    }
});