Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html data-ng-app="app" id="ng-app">
<head>
  <meta charset="utf-8">
  <title>Circuit</title>
    <script data-require="angular.js@1.2.0-rc2" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script data-require="jquery@1.8.3" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
    <script src="circuit.js"></script>
    <link rel="stylesheet" href="circuit.css" type="text/css">
</head>
<body>
  <div class="circuit" data-ng-controller="interactionCrtl">
    <a href="" id="item-dimmer-1" class="item dimmer is-inactive" ng-class="'state-'+dimmer.state" ng-click="nextState(dimmer)" ng-init="dimmer.states=['a','b','c','d','e']; dimmer.stateIndex=dimmer.stateIndex||2; dimmer.state=dimmer.states[dimmer.stateIndex];">
      <div class="item-widget"></div>
      <p class="item-label">Dimmer</p>
    </a>
    <div id="item-battery-1" class="item battery state-negative-positive">
      <div class="item-widget"></div>
      <p class="item-label">Battery</p>
    </div>
    <a href="" id="item-switch-1" class="item switch is-active" ng-class="'state-'+switch.state" ng-click="nextState(switch)" ng-init="switch.states=['a','b']; switch.stateIndex=switch.stateIndex||0; switch.state=switch.states[switch.stateIndex];">
      <div class="item-widget"></div>
      <p class="item-label">Switch</p>
    </a>
    <div id="item-lamp-1" class="item lamp" ng-class="{
      'state-0': !dimmer.state || !switch.state,
      'state-1': dimmer.state == 'a' && switch.state == 'a',
      'state-2': dimmer.state == 'b' && switch.state == 'a',
      'state-3': dimmer.state == 'c' && switch.state == 'a',
      'state-4': dimmer.state == 'd' && switch.state == 'a',
      'state-5': dimmer.state == 'e' && switch.state == 'a',
      'state-6': dimmer.state == 'a' && switch.state == 'b',
      'state-7': dimmer.state == 'b' && switch.state == 'b',
      'state-8': dimmer.state == 'c' && switch.state == 'b',
      'state-9': dimmer.state == 'd' && switch.state == 'b',
      'state-10': dimmer.state == 'e' && switch.state == 'b'
    }
    ">
      <div class="item-widget"></div>
      <p class="item-label">Lamp</p>
    </div>
​
    <!--
    <div id="item-lamp-1" class="item item-lamp">
      <p class="item-label">Lamp</p>
      <a class="item-widget lamp state-9"></a>
    </div>
-->
  </div>
</body>
</html>
 
var app = angular.module('app', []);
​
app.controller('interactionCrtl', ['$scope', function($scope){
  $scope.nextState = function(widget){
    widget.stateIndex++;
    if(widget.stateIndex > widget.states.length - 1){
      widget.stateIndex = 0;
    }
    widget.state = widget.states[widget.stateIndex];
  };
}]);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
chrisjacob123pro
0viewers