JSFiddle - React, Tailwind, and code Playground

by Trev Burley

HTML

<body ng-controller="myController">
    <my-radio options="{id:'toggle',radios:[{text:'On',value:'on'},{text:'Off',value:'off'}]}" current-value="currentRadioValue" value-change="radioChanged(id,value)"></my-radio>
    
    <p>Initial radio value: {{ initialRadioValue }}</p>
    <p>{{ radioChangedLog }}</p>
</body>

CSS

.newline {
        display: block !important;
    }

JavaScript

var app = angular.module("app", [
    'components.myRadio'
]);

app.controller("myController", ['$scope', function($scope) {
    $scope.initialRadioValue = 'off';
    $scope.radioChangedLog = '';
    
    $scope.radioChanged = function (id, value) {
        $scope.radioChangedLog += id + ' was changed to ' + value + ' <br />';
    }
}]);

angular.module("components.myRadio", [])
    .directive("myRadio", function() {
        return {
            restrict: "E",
            scope: {
                options: "=",
                currentValue: '=',
                valueChange: '&'
            },
            required: ['ngModel'],
            template: ' <div ng-class="{newline : rdo.newline}" ng-repeat="(key, rdo) in options.radios"><input id="{{ options.id }}{{ key }}" name="{{ options.id }}" type="radio" ng-model="currentValue" ng-value="rdo.value" ng-click="onChange(rdo.value)" /><label for="{{ options.id }}{{ key }}"><span><i class="fa fa-circle"></i></span> {{ rdo.text | translate }}</label></div>',
            controller: function ($scope) {
                $scope.onChange = function (value) {
                    $scope.currentValue = value;
                    $scope.valueChange({
                        id: $scope.options.id,
                        value: value
                    });
                };
            }
        };
    });

angular.bootstrap(angular.element("html")[0], ["app"]);