Ng-Show-Ng-Hide-7

 
In this example, we can change the color of text on ng-mouseleave event which is calling hideShow(isHide) function. If isHide is true then it will show the text "Green Color !" in green color and if isHide is false then "Red Color !" is shown in red color. Angularjs function for toggling the value of isHide: $scope.hideShow = function (val) { $scope.isHide = !val; }; and by default, on ng-init we setup isHide=true.
 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="controllerName"> <div class="row"> <div class="col-md-6" ng-init="isHide=true"> <div ng-show="isHide" ng-mouseleave="hideShow(isHide)"><h3 style="color:green">Green Color !</h3></div> <div ng-hide="isHide" ng-mouseleave="hideShow(isHide)"><h3 style="color:red">Red Color !</h3></div> </div> </div> </div> <script> var app = angular.module("app", []); app.controller('controllerName', ['$scope', function ($scope) { $scope.hideShow = function (val) { $scope.isHide = !val; }; }]); </script> </body> </html>
Output