JSFiddle - React, Tailwind, and code Playground

by dcodesmith

HTML

<link rel="stylesheet" href="//getbootstrap.com/dist/css/bootstrap.css">
<div ng-app='currentApp'>
    <div ng-controller='ACtrl'>
        <form-control templates='templates'></form-control>
    </div>
</div>

JavaScript

var currentApp = angular.module('currentApp', []);
currentApp.directive('formControl', ['$compile', function ($compile) {

    return {
        restrict: 'EA',
        scope: {
            templates: '='
        },
        template: '<div ng-repeat="(key, prop) in templates">' +
        '<label for="templates">{{key}}</label>' +
                      '<select class="form-control">' +
                        '<option ng-repeat="template in templates[key]" value = "{{template}}">' +
                            '{{template}}' +
                        '</option>' +
                      '</select>' +
                    '</div>',
        link: function(scope, element, attrs) {}
    }
}]).controller('ACtrl', function($scope){

          $scope.templates = {
            pages: ['home', 'about'],
            posts: ['blog', 'lab']
          };
});