JSFiddle - React, Tailwind, and code Playground

by rur_d

HTML

<script type="text/javascript" ng:autobind
        src="http://code.angularjs.org/0.9.17/angular-0.9.17.js"></script>

<div ng:init="data={state:'inactive'}">
<button rd:flag="data.state" rd:toggle="['active', 'inactive', 'public']" rd:labels="['ACT', 'INACT', 'PUB']"></button>

<p>{{data}}</p>
    
</div>

JavaScript

angular.directive('rd:selectable', function(expression, compiledElement){
    
    var flag = compiledElement.attr("rd:flag");
    compiledElement.css("display","block");
    
  return function(linkElement){
      var scope = this;
      var selected
          
      updateLabel();
      
      linkElement.click(
          function(){
              scope.$set(flag, !selected);
              updateLabel();
          }
      );
      
      function updateLabel(){
          selected = scope.$get(flag) || false;
          
          if(selected) linkElement.html("Selected");
          else linkElement.html("Deselected");
      }
  };
});

angular.directive('rd:toggle', function(expression, compiledElement){
    var opts = eval(expression);
    
    if( !opts || opts == "" ) return;
    
    var labels = eval(compiledElement.attr("rd:labels"));
    if( !labels || labels == "" ){
        labels = opts.slice();
    }
      
    var flag = compiledElement.attr("rd:flag");
    compiledElement.css("display","block");
    
        
  return function(linkElement){
      var scope = this;
      var selected
      
      linkElement.click(
          function(){
              var ind = opts.indexOf(selected);
              if( ind >= opts.length-1 ) ind = -1;
              scope.$set(flag, opts[++ind] );
              updateLabel();
          }
      );
      
      function updateLabel(){
          selected = scope.$get(flag);
          
          if(selected) linkElement.html(labels[opts.indexOf(selected)]);
          else linkElement.html("none");
      }
      
      scope.$watch(flag, function(){
          updateLabel();
      });
  };
});