Change css on click angularjs

Question

To me it seems like the best solution is to use a directive; there's no need for the controller to know that the view is being updated.

Javascript:

var app = angular.module('app', ['directives']);

angular.module('directives', []).directive('toggleClass', function () {
    var directiveDefinitionObject = {
        restrict: 'A',
        template: '<span ng-click="localFunction()" ng-class="selected"  ng-transclude></span>',
        replace: true,
        scope: {
            model: '='
        },
        transclude: true,
        link: function (scope, element, attrs) {
            scope.localFunction = function () {
                scope.model.value = scope.$id;
            };
            scope.$watch('model.value', function () {
                // Is this set to my scope?
                if (scope.model.value === scope.$id) {
                    scope.selected = "active";
                } else {
                    // nope
                    scope.selected = '';
                }
            });
        }
    };
    return directiveDefinitionObject;
});

HTML:

<div ng-app="app" ng-init="model = { value: 'dsf'}"> <span>Click a span... then click another</span>

<br/>
<br/>
<span toggle-class model="model">span1</span>

<br/><span toggle-class model="model">span2</span>

<br/><span toggle-class model="model">span3</span>

CSS:

.active {
     color:red;
 }

I have a fiddle that demonstrates. The idea is when a directive is clicked, a function is called on the directive that sets a variable to the current scope id. Then each directive also watches the same value. If the scope ID's match, then the current element is set to be active using ng-class.

The reason to use directives, is that you no longer are dependent on a controller. In fact I don't have a controller at all (I do define a variable in the view named "model"). You can then reuse this directive anywhere in your project, not just on one controller.

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;
      }

Many times we need to change the look and feel of an element in response to an event.
This means that we need to apply dynamic style to an element in angular based on some condition.
Toggling a CSS class means adding and removing the class. This might be on some event such as a click event.
This article will explain how to add and remove a CSS class on click.

Toggle class

A class can be toggled using class binding in angular.
Syntax to apply class binding is by using class. followed by the name of the class to be applied as shown below

<div [class.className] = “condition” />

Toggle class on click

For toggling class on click event, associate the click event with a function in component class which will reverse the condition of class binding. Example,

<div [class.visited] = “isVisited == true”
    (click) = “checkVisited()” />

bove example binds a class with the isVisited property of component class.

Associate a click event with this div so that when the div is clicked, it will invoke a function in component class.
This function will simply reverse the value of property to which the class is bound.

Thus, the function will be defined as

public isVisited = false;public checkVisited() {
   // reverse the value of property
   this.isVisited = !this.isVisited;
}

When the component loads, isVisited is set to false so that the div will not contain the class visited.
When the div is clicked, the value of isVisited will be set to true.

This means that the condition of class binding(isVisited == true) becomes true and the class is applied.
Now when the div is clicked again, the value of isVisited becomes false and the class is removed.

Thus, we have successfully toggled the class on click event.

Hope you enjoyed reading the article. Original article can be found here

programming css