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>

            
<input name="list" type="text" value='[{"name":"bob","age":45},{"name":"bob2","age":45},{"name":"bob3","age":45},{"name":"bob4","age":45},{"name":"bob5","age":45},{"name":"bob6","age":45},{"name":"bob7","age":45}]' ng:format="json"/>

<my:buttongroup name="btgroup">
    {{selectedIndex}}
    <div ng:repeat="bob in list" class="bob-item">
        <p>{{bob.name}}</p>
        <p>{{bob.age}}</p>
        <button my:incrament="bob.age">Age Me</button>
        <button my:button ng:click="selected = !selected">{{selected}}</button>
    </div>
</my:buttongroup>

    
<div id="debug">
    {{btgroup.selectedIndex}}
</div>

CSS

.bob-item {
        margin : 10px;
}

.bob-item > *{
    display : inline-block;
}

.selected = {
    background-color : #ffaaaa;
}

JavaScript

angular.directive( "my:incrament", function(exp,el){
    
    var flag = exp;
    
    return function(  linkEl ){
        var scope = this;
        linkEl.click(
            function() {
                var age = scope.$get(flag);
                scope.$set( flag, ++age );
            } );
    }
} );

angular.widget("my:buttongroup",function(el){
   var compiler = this;
   compiler.directives(true);
   compiler.descend(true);
   el.css("display","block");
    
    return function(linkEl){
        var scope = this;
        scope.selectedIndex = -1; 
        scope.setSelectedIndex = function( index ){
            scope.selectedIndex = index;   
            scope.$eval();
        }
    }
});

angular.directive( "my:button", function(exp,el){
   var compiler = this;

    return function(linkEl){
        var scope = this;
        
        scope.selected = false;
        scope.$watch("selectedIndex", function(){
            if( scope.selectedIndex != scope.$index ){
                scope.selected = false;
            }
        });
            
        scope.$watch( "selected", function(){
        if( scope.selectedIndex == scope.$index  ) {
            if( !scope.selected ) scope.setSelectedIndex( -1 );
        }
        else if( scope.selected ) {
            scope.setSelectedIndex( scope.$index );
        }
        }, false);    
    }
});