JSFiddle - React, Tailwind, and code Playground

by epinapala

HTML

<script src="http://st.pimg.net/cdn/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://st.pimg.net/cdn/libs/bootstrap/2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<table>
    <tr>
        <td> <strong>Production</strong> </td>
        <td> {{types.production.text}} </td>
        <td> <button>Sync to Production</button> </td>
    </tr>
    <tr>
        <td> <strong>SandBox</strong> </td>
        <td ng-model="types.sandbox.text"> </td>
        <td> <button ng-click="sync($types.sandbox)">Sync to Sandbox</button> </td>
    </tr>
     <tr>
        <td><br /><br /></td>
    </tr>
    <tr>
        <td><strong>Selected : </strong>

        </td>
        <td><code>  {{myModel.text}}   </code>

        </td>
    </tr>
    <tr>
        <td><br /><br /></td>
    </tr>
    <tr>
        <td><strong>QA : </strong>

            <td>
                <buttons-radio class="btn-group-vertical" data-toggle="buttons-radio" model='myModel' options='appTypesMap'></buttons-radio>
            </td>
    </tr>
</table>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .btn-group-vertical > button {
    margin-bottom:10px;
    border-radius:10px !important;
}

JavaScript

"use strict";

function Main($scope) {
    $scope.myOptions = ["Left", "Middle", "Right"];
    $scope.myModel = {};

    $scope.$watch('myModel', function (v) {
        console.log('changed', v);
    });
    
    $scope.sync = function(model){
        model = $scope.myModel;
    };

    $scope.appTypesMap = {
        "ebay-web": {
            "text": "eBay Web Application",
                "scopePolicy": "1stParty",
                "type": "Hosted"
        },
            "ebay-mobile": {
            "text": "eBay Mobile Application",
                "scopePolicy": "1stParty",
                "type": "Device"
        },
            "ebay-ui-widget": {
            "text": "eBay UI Widget",
                "scopePolicy": "1stParty",
                "type": "JavaScript"
        },
            "second-party-web": {
            "text": "Second Party Web Application",
                "scopePolicy": "2ndParty",
                "type": "Hosted"
        },
            "external-web": {
            "text": "External Web Application",
                "scopePolicy": "3rdParty",
                "type": "Hosted"
        },
            "legacy-web": {
            "text": "Legacy Web Application",
                "scopePolicy": "LegacyPartner",
                "type": "Hosted"
        },
            "cs-app": {
            "text": "Customer Service Application",
                "scopePolicy": "VendorCS",
                "type": "Hosted"
        }
    };
}

angular.module('buttonsRadio', [])
    .directive('buttonsRadio', function () {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            options: '='
        },
        controller: function ($scope) {
            $scope.activate = function (option) {
                $scope.model = option;
            };
        },
        template: "<button type='button' class='btn btn-default' " +
            "ng-class='{active: option.text == model.text}'" +
            "ng-repeat='option in options' " +
      ...