Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Adding CSS on a click in AngularJs

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 43
    Comment on it

    If you want to add some css or change css on a button click in angularjs,you need to use angular directive mg-class for this.

    It is very simple you just need to bind a variable into the directive mg-class and change it from the controller.

    Here is the HTML:

    <html ng-app="app">
      <head>
        <title>Change on click</title>
    </head>
      <body ng-controller=Change>
        <div ng-class=Changecss>{{Changecss}}</div>
        <button ng-click="changeColor()>Change Color</button>
    
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/example.js"></script>>
    </body>
    </html>
    

    Now below is the js code you need to add to your controller.

    var app = angular.module("app",[]);
    
          app.controller("Change",function($scope){
    
            $scope.Changecss = green;
    
            $scope.changeColor = function(){
              if ($scope.Changecss === green)
                $scope.Changecss = "blue";
              else
                $scope.Changecss = green;
            };
          })
    

    Now you need to define class in your css.

    .green{
            color:green;
          }
    .blue{
            color:blue;
          }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: