Ng-Class-8

 

On button click we can show or hide the text and "Change Color" button on the basis of startAni1 and startAni2 value.On change color button click startAni2 evaluates true then red class will apply to the text.

 
 
 
<!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> <style> .red { color: red; } .green { color: green; } </style> </head> <body ng-app> <div> <div class="container" ng-init="startAni1 = false,startAni2 = false"> <input type="button" value="Toggle Me" ng-click="startAni1 =!startAni1" /> <div ng-show="startAni1"> <p ng-class="{true:'red',false:'green'}[startAni2]">Hi I'm visible</p> <input type="button" value="Change Color" ng-click="startAni2=!startAni2" /> </div> </div> </div> </body> </html>
Output