JSFiddle - React, Tailwind, and code Playground

by kzima

HTML

<html ng-app='app'>
    <body ng-controller='main'>
        <qtnyesno qtn-variable="testVar">This is a test question. Yes or No?</qtnyesno>
        testVar = {{testVar}}
    </body>
</html>

CSS

body { padding: 40px; }
label { display: block; }
div, label { margin: 10px 0; }

JavaScript

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

module.directive('qtnyesno', function() {
        return {
                restrict: 'E', // must be an HTML element
                transclude: true,
                scope: {
                        valvar: '=qtnVariable',
                },
                template:
                    '<div>' +
                    '<label ng-transclude></label>' +
                    '<label class="radio inline"><input type="radio" name="rdo{{valvar}}" value="1" ng-model="valvar"> Yes </label>' +
                    '<label class="radio inline"><input type="radio" name="rdo{{valvar}}" value="0" ng-model="valvar"> No </label>' +
                    '<hr></div>',
                replace: true,
        };
});

module.controller('main', function($scope) {
    $scope.testVar = 1;
});