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>
</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";
}

myApp.directive('radioButtons', function($timeout) {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
            options: '=',
            model: '=ngModel'
        },
        template:   '<div class="btn-group gaig-radio-buttons">' +
                        '<a href="javascript:void(0)" class="btn" ng-repeat="option in options" ng-click="select($event, scope)" value="{{option.value}}">{{option.label}}</a>' +
                    '</div>',
        replace: true,
        link: linker
    }

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

        element.ready(function() {
            var tmp = element.find('.btn');
            console.log(tmp.length);
            $(tmp).each(function(i, el) {
                console.log(scope.model + " vs " + $(el).attr('value'));
            }); 
        });
    }

    function select(event, scope) {
        var selected = $(event.target),
            siblings = selected.siblings();

        siblings.each(function(i, sibling) {
           $(sibling).removeClass('active');
        });

        selected.addClass('active');

        scope.model = selected.val();
    }
});