CODEWITHSUNDEEP
javascripthtmlcssangularjstwitter-bootstrap
vellattukudy
vellattukudy

Reputation: 789

How to disappear an alert div after display it

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?

Upvotes: 0

Views: 76

Answers (3)

Pitchai P
Pitchai P

Reputation: 1317

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);
    }
});

Upvotes: 0

Igor Quirino
Igor Quirino

Reputation: 1195

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

Upvotes: 0

Douwe de Haan
Douwe de Haan

Reputation: 6646

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);

Upvotes: 1

Related Questions