1

What I want is to show a DIV when I click a button and hide it after 2s.

<div ng-show="alertMsg.show">{{alertMsg.text}}</div>

After triggering the click event, the DIV shows correctly, but cannot hide. It seems that the value of "alertMsg.show" has been changed to FALSE correctly after 2s, but the DIV still there in the view.

Click Event:

$scope.$apply(function(){
            $scope.alertMsg.show = true;
        });

        $timeout(function () {
            $scope.alertMsg.show = false;
        }, 2000);

I want to know how to hide the DIV via $timeout

P.JAYASRI
  • 358
  • 2
  • 18
Wowfeng
  • 17
  • 5

1 Answers1

0

hide show with time limit

live code is here http://jsfiddle.net/dofrk5kj/4/

HTML

<div ng-controller="homeController">
        <button ng-click="showAlert()"> Show alert </button>
      <div ng-show="alertMsg.show">{{alertMsg.text}}</div>
</div>

controller.js

controller('homeController', function ($scope, $timeout) {
     $scope.alertMsg = {
        show: false,
        text:"Alert message is ::show"
     };
     $scope.showAlert =function(){
         $scope.alertMsg.show = true;
         $timeout(function(){      
             $scope.alertMsg.show = false;
          }, 2000);
     }
   });

but you can use separate flag to hide/show alert 

<alert ng-repeat="alert in alerts" type="{{alert.type}}"
                    close="closeAlert($index)">{{alert.msg}} </alert>
P.JAYASRI
  • 358
  • 2
  • 18
  • @Wowfeng You can also use – P.JAYASRI Mar 20 '15 at 11:49
  • Thanks. But my code in $timeout is not working and $scope.$apply is also not working to change a var in $timeout. I found a solution to move the code in $timeout into a single function and it worked. – Wowfeng Mar 23 '15 at 01:50