JSFiddle - React, Tailwind, and code Playground

by gogirl

HTML

<div ng-app="myApp">
    
    <button type="button" ng-click="onOff()">{{isOn}}</button>
    <a ng-class='{"clicked": !isOn, " ": isOn}' ng-click="onOff()">LINK</a>
    <input type="checkbox" ng-model="isOn" />
    <select disabled="isOn()">
       <option value="{{isOn}}">{{isOn}}</option>
       <option value="{{!isOn}}">{{!isOn}}</option>
    </select>(Read-Only)
    
    The controller is only responsible for knowing and toggling
    the state. The information as to which style to use is kept 
    in the template where it belongs. Graphics or colors in Css.     
    The on and off style is toggled by user click event.
    Here the on class will be applied if isOn is true. The same 
    with the off class. 
  
   <toggle />
  
   
</div>

CSS

.box
{
	width: 100px;
	height: 100px;
	border-style: solid;
	border-width: 2px;
}

.on
{			
	 background-image: url('http://www.w3schools.com/js/pic_bulbon.gif'); background-repeat: no-repeat; background-position: left top; padding-top:68px; margin-bottom:50px;
}

.off
{
 background-image: url('http://www.w3schools.com/js/pic_bulboff.gif'); background-repeat: no-repeat; background-position: left top; padding-top:68px; margin-bottom:50px; } 

a.clicked{color:grey}

JavaScript

var test = angular.module("myApp", []);
test.directive("toggle", function()
{	
	return {
		restrict: "E",
		replace: true,
		template: " <div class='box off' ng-class='{ \"on\": isOn, \"off\": !isOn }' ng-click='onOff()'>Debug Bool value={{isOn}}</div> ",
		link: function(scope, element, attributes, controller)
		{
			scope.isOn = false;
            scope.onOff = function () {
                scope.isOn = !scope.isOn;
            }

		}
	};
});