Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Javascript / Jquery

AngularJS: How To Change The Color Property Via Toggle When Css Class Does Change?

Post a Comment
I'm quite new to AngularJS and have already found a lot of helpfull answers on this forum, however the following item is driving me nuts. First of all, let me tell you what I want

Solution 1:

You can, but you don't need to use directives to make this work nice. You could use ng-styleor just $scopelike the following example will show you. This Demo shows you, how easy make a "toggle" work in AngularJS by using directives. 

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

OfficeUIRibbon.directive('officeActiveStyle', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
          scope.$watch(function() {
               officeUiRibbonActiveHexColor = '#f700ff';
          });
        }
    };
});

/**
 * CSS Hex color holder
 * @type {string}
 * @global
 */
 var officeUiRibbonActiveHexColor = '#ff0000';

/**
 * Active holder
 * @type {boolean}
 * @global
 */
 var officeUiRibbonActiveToggle = false;

// Defines the AngularJS 'OfficeUIRibbon' controller.
OfficeUIRibbon.controller('OfficeUIRibbon', ['$scope', '$http', '$animate', function($scope, $http, $animate) {


    $scope.toggle = function () {
      officeUiRibbonActiveToggle = officeUiRibbonActiveToggle ? false : true; //switch active state
    }

    $scope.getStyles = function () {
      if (officeUiRibbonActiveToggle) {
         return officeUiRibbonActiveHexColor; 
      }
    }
}]);

HTML-Template:

<!DOCTYPE html>
<html ng-app="OfficeUIRibbon">

  <head>
    <script src="https://code.angularjs.org/1.3.10/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="OfficeUIRibbon">
    <div
         office-active-style=""
         style="height: 200px; border: 1px solid black; background-color: {{ getStyles(); }}">Dit is een demo</div>

         <a href="#" ng-click="toggle()">Toggle</a>
  </body>

</html>

Solution 2

Optional: This is an other Demo. This demo shows you, how easy make a "toggle" work in angularjs without using directives. 

var OfficeUIRibbon = angular.module('OfficeUIRibbon', [])

OfficeUIRibbon.controller('OfficeUIRibbon', ['$scope', '$http', '$animate', function($scope, $http, $animate) {

    /**
     * Active state holder
     * @type {boolean} 
     */ 
    var active = false;

    /**
     * Holds css color hex code
     * @type {string}
     */
    var color = '#ff0000';

    /**
    * Check active scope
    */
    $scope.toggleShow = function () {
      active = !active; //switch true false in the coolest way ;)
    }

    /** 
    * Check active scope
    */
    $scope.giveColor = function () {
      if (active) { 
         return color;
      } 
    }
}]);

Your HTML-Template:

<!DOCTYPE html>
<html ng-app="OfficeUIRibbon">

  <head>
    <script src="https://code.angularjs.org/1.3.10/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="OfficeUIRibbon">
    <div office-active-style=""
         style="height: 200px; border: 1px solid black; background-color: {{ giveColor() }}">Dit is een demo</div>

         <a href="#" ng-click="toggleShow()">Toggle</a>
  </body>

</html>

Post a Comment for "AngularJS: How To Change The Color Property Via Toggle When Css Class Does Change?"