How to hide div after some time using AngularJS?

By Hardik Savani | September 9, 2016 | | 2453 Viewer | Category : AngularJS


Share this post:



Sometimes we require to do like hide div or text or any tag after some time using AngularJS. In this example i am going to show you how to do it.

AngularJS have $timeout variable, $timeout variable through we can set specific time after hide. We can easily set time for hide or show. In this simple example you can see how it is works.

Bellow example you can see and run bellow file in your machine.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Angularjs ng-hide div after few seconds</title>

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>

<body>

<div ng-app = "mainApp" ng-controller = "myController">

<p ng-hide="isCheck" style="background:red;padding:5px;">{{ myText }}</p>

</div>


<script>

var mainApp = angular.module("mainApp", []);

mainApp.controller('myController', function($scope, $timeout) {

$scope.myText = "This is for example";

$scope.isCheck = false;


$timeout(function () { $scope.isCheck = true; }, 4000);

});

</script>


</body>

</html>






We are Recommending you: