JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<section ng-app="gen" ng-controller="DemoCtrl">

    <script type="text/ng-template" id="spreadsheet.html">
        <h1>Spreadsheet</h1>
        
        <h2>Headers</h2>
        <ul>
            <li ng-repeat="col in spreadsheet.columns">
                <input type="checkbox" ng-model="col.selected" ng-disabled="col.required"/>{{col.name}}
            </li>
        </ul>
        
        <h2>Rates</h2>
    </script>

    <div spreadsheet="config">
    </div>
</section>

JavaScript

var module = angular.module("gen", []);

function RequiredColumn(name) {
    this.name = name;
    this.required = true;
    this.selected = true;
}
function OptionalColumn(name) {
    this.name = name;
    this.required = false;
    this.selected = false;
}

function Spreadsheet() {

    this.columns = [
        new RequiredColumn("Customer Id"),
        new RequiredColumn("Start Date"),
        new RequiredColumn("End Date"),
        new RequiredColumn("Origin"),
        new RequiredColumn("Destination"),
        new OptionalColumn("Service Level"),
        new OptionalColumn("Dangerous Goods"),
        new OptionalColumn("Pickup City"),
        new OptionalColumn("Pickup Postal Code"),
        new OptionalColumn("Delivery City"),
        new OptionalColumn("Delivery Postal Code")
    ];
        
    this.rates = [];
    
};

module.controller('DemoCtrl', function($scope) {
    $scope.config = new Spreadsheet;
});


module.directive('spreadsheet', function() {
    return {
        templateUrl: "spreadsheet.html",
        scope: {
            spreadsheet : "=spreadsheet"   
        }
    }
    
});