JSFiddle - React, Tailwind, and code Playground

by dkrotts

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<!doctype html>
<html>
    <head></head>
<body ng-controller="foo">
    <radio-buttons options="optionsList" ng-model="myModel"></radio-buttons>
    <h1>Model: {{myModel}}</h1>
</body>
</html>

JavaScript

var myApp = angular.module('myApp', []);
angular.element(document).ready(function() {
   angular.bootstrap(document, ['myApp']);
});

function foo($scope, $timeout) {
  $scope.optionsList = [
        {value: "ACT", label: "Activity"},
        {value: "ACTSTATUS", label: "Activity & Status"},
        {value: "TOTALS", label: "Totals"}
    ];

    $scope.myModel = "ACT";
    
    $timeout(function() {
       $scope.myModel = "TOTALS"; 
    }, 2000);
}

gaigUi.app.directive('gaigRadioButtons', function($timeout) {
    return {
        restrict: 'E',
        require: 'ngModel',
        priority: 100,
        scope: {
            options: '=',
            model: '=ngModel',
            callback: '=ngChange',
            disabled: '=ngDisabled'
        },
        template:   '<div class="btn-group gaig-radio-buttons">' +
                        '<a href="javascript:void(0)" class="btn" ng-disabled="disabled" ng-class="{true:\'active\', false:\'\'}[selectedValue==option.value]" ng-repeat="option in options" ng-click="select(scope, option.value)" value="{{option.value}}">{{option.label}}</a>' +
                    '</div>',
        replace: true,
        link: linker
    }

    function linker(scope, element, attrs) {
        scope.select = select;
        scope.scope = scope;
        scope.selectedValue = "ACT";

        scope.$watch("model", function() {
            select(scope, scope.model);
        });
    }

    function select(scope, val) {
        if (!scope.disabled && scope.selectedValue != val) {
            scope.selectedValue = val;
            scope.model = val;

            scope.callback.call();
        }
    }
});