CODEWITHSUNDEEP
angularjs
Anon
Anon

Reputation: 1387

How to add a class to an element based on whether or not another class is present in angularJS

I am working with someone else's code. Currently, I have the following custom directive that I would like to add a class to without changing rest of the code:

<b-tab tab-title="Business Plan <p>Good server</p>" class="corp active">
</b-tab>
<b-tab tab-title="Corporate Plan" class="corp">
</b-tab>
<b-tab tab-title="International Plan <p>Best server speeds</p>" class="corp">
</b-tab>

A class: 'active' gets added to this tab automatically when the tab is active. I would like to add specific classes to all my tabs.

The directive looks something like:

angular.module("app").directive('bTab', ['$timeout', '$sce',             function($timeout, $sce) {
return {
    require: '^bTabGroup',
    transclude: true,
    replace: true,
    restrict: "AE",
    templateUrl: '/tabs/_tab.tmpl',
    scope: true,
    link: function (scope, element, attrs, tabGroupCtrl) {
        var set_active = ('setActive' in attrs && attrs.setActive.toLowerCase() === 'true');

        attrs.$observe("tabTitle", function() {
            if ("tabTitle" in attrs) {
                scope.tabTitle = $sce.trustAsHtml(attrs.tabTitle);
            } else {
                scope.tabTitle = $sce.trustAsHtml("No title");
            }
        });

        attrs.$observe("tabName", function() {
            if ("tabName" in attrs) {
                scope.tabName = attrs.tabName; // can I add a class here when it has the class 'active'?
            } else {
                scope.tabName = undefined;
            }
        });

        var priority = parseInt(attrs.tabPriority) || 0;
        tabGroupCtrl.addTab(scope, element, priority, set_active);

        scope.$on('$destroy', function() {
            tabGroupCtrl.removeTab(scope);
        });
      }
    };
}]);

The classes I want to add are:

corp1-active

corp2-active

corp3-active

Upvotes: 0

Views: 67

Answers (2)

Karen Grigoryan
Karen Grigoryan

Reputation: 5422

attrs.$observe is watching interpolated values and triggers every time there is a change of interpolated value. So in your situation it's more convenient to use scope.$watch to watch for class change on the element.

Here is my try to explain:

angular.module('app', [])
  .run(function($interval) {
    var i = 0;
    $interval(function() {
      // just a hack to see in action
      // the assignment of "active" class and
      // sync change of dependant classes
      
      var $corp = $('.corp')
      .removeClass('corp1-active corp2-active corp3-active');
      $corp.eq(i % 3)
      .addClass('corp' + ((i % 3) + 1 ) + '-active');
      i+=1;
    }, 1000);
  })
  .directive('bTab', function() {
    return {
      replace: true,
      template: '<div ng-bind="title"></div>',
      scope: true,
      link: function(scope, element, attrs) {
        scope.title = attrs.tabTitle;
        var activeTabClass = attrs.tabName + '-active';
        scope.$watch(function() {
          return element.hasClass('active');
        }, function(newValue, oldValue) {
          if (newValue !== oldValue) {
            if (newValue) {
              attrs.$addClass(activeTabClass);
            } else {
              attrs.$removeClass(activeTabClass);
            }
          }
        });

      }
    }
  });
.corp1-active {
  background: green;
}

.corp2-active {
  background: red;
}

.corp3-active {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="app">
  <b-tab tab-name="corp1" tab-title="Business Plan <p>Good server</p>" class="corp active">
  </b-tab>
  <b-tab tab-name="corp2" tab-title="Corporate Plan" class="corp">
  </b-tab>
  <b-tab tab-name="corp3" tab-title="International Plan <p>Best server speeds</p>" class="corp">
  </b-tab>
</div>

Upvotes: 1

hurricane
hurricane

Reputation: 6724

Yes you can. I you are using ng-class you can set a value inside scope.

Html:

<b-tap ng-value="myValue" class="{{myValue.newClass}}">

Directive:

    attrs.$observe("tabName", function() {
        if ("tabName" in attrs) {
            scope.tabName = attrs.tabName; // can I add a class here?
            scope.newClass = "corp1-active";
        } else {
            scope.tabName = undefined;
        }
    });

Or you can use it with angular element.

    attrs.$observe("tabName", function() {
        if ("tabName" in attrs) {
            scope.tabName = attrs.tabName; // can I add a class here?
            element.addClass("corp1-active");
        } else {
            scope.tabName = undefined;
        }
    });

Upvotes: 1

Related Questions