Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to add, remove and check the class using angularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.28k
    Comment on it

    We can add, remove or check classes through our angular code:

    The following is the syntax for adding a class and the corresponding CSS related to that class:

     

    HTML:

    <div ng-app="addRemove" ng-controller="myCtrl">
    <div id="myDiv" ng-class="staticClass">Adding and Removing class from the element.</div>
    
    <button type="button" ng-click="addClass();">Add Class</button>
    <button type="button" ng-click="removeClass();">Remove Class</button>
    <button type="button" ng-click="checkClass();">Check Class</button>
    </div>
    

     

    Style:

    .red {
      color:red;
    }
    

     


    Script:

    var app = angular.module("addRemove",[]);
    app.controller ("myCtrl", function($scope) {
        $scope.staticClass = [];
        $scope.addClass = function() {
          $scope.staticClass.push('red');
        }
        $scope.removeClass = function() {
          $scope.staticClass.pop('red');
        }
        $scope.checkClass = function() {
          if($scope.staticClass.indexOf('red') == -1) {
             alert('Doesn't have class red');
          } else {
             alert('Has class red');
          }
        }
    });

    Hope this will help you to resolve your issue.

 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: