JSFiddle - React, Tailwind, and code Playground

by Jed Mao

HTML

<div data-ng-controller="controller">
    <div
      data-ng-repeat="radio in radios"
      data-ng-model="selectedValue.value"
      data-name="radio1"
      data-label="{{radio.label}}"
      data-value="{{radio.value}}"
      data-ng-change="change(radio.value)"
      data-labeled-radio></div>
    <br>
    selected value: {{selectedValue.value}}
</div>

JavaScript

angular.module('app', [])
.controller('controller', function($scope) {
    $scope.selectedValue = { value: 'FOO' };
    $scope.radios = [
        { label: 'foo', value: 'FOO' },
        { label: 'bar', value: 'BAR' }
    ];
    $scope.change = function() {
        console.log('changed:', arguments);
    };
})
.directive('labeledRadio', function(){
    return {
        require: ['ngModel', 'value'],
        restrict: 'A',
        replace: true,
        template: [
            '<label class="radio">',
            '  <input class="radio__input" type="radio" data-ng-model="ngModel" name="{{name}}" value="{{value}}" data-ng-change="change()">',
            '  <span class="radio__label">{{label}}</span>',
            '</label>'
        ].join(''),
        scope: {
            ngModel: '=',
            label: '@',
            name: '@',
            value: '@',
            change: '&ngChange'
        }
    }
});