Angular+JQ

by basarat

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<div ng-controller="Main">
    <table>
        <tr>            
            <!-- for column in columns -->
            <!-- If column.type is single have single td -->
            <!-- If column.type is double have two td -->
            <span ng-repeat="column in row.columns">
                <span ng-switch="column.type">
                    <span ng-switch-when="single"><td>{{column.name}}</td></span>
                    <span ng-switch-when="double"><td>{{column.name}}</td><td>{{column.name}}</td></span>
                </span>
            </span>
        </tr>
    </table>
</div>
<div> DESIRED: </div>
<!-- Desired output -->
<table>
    <tr>        
        <!-- for column in columns -->
        <!-- If column.type is single have single td -->
        <!-- If column.type is double have two td -->
        <td>col1</td>        
        <td>col2</td>
        <td>col2</td>
    </tr>
</table>

CSS

tr, td {
    margin: 2px;
    padding: 2px;
}

JavaScript

angular.module("myApp", []);

function Main($scope) {
    $scope.rows = [
        {
            name: 'first',
            columns: [{
                type: 'single',
                name: 'col1'
            }, {
                type: 'double',
                name: 'col2'
            }]
        },
        {
            name: 'second',
            columns: [{
                type: 'single',
                name: 'col1'
            }]
        }        
    ];
    
    $scope.processed = {
        {
            name: 'first',            
            uiColumns: [{
                colspan: 1,
                type: 'single',
                name: 'col1'
            }, 
            {
                colspan: 1,
                type: 'double',
                name: 'col2'
            },
            {
                colspan: 1,
                type: 'double',
                name: 'col2'
            }]
        },
        {
            name: 'second',
            columns: [{
                colspan: 3, 
                type: 'single',
                name: 'col1'
            },
                      
        }
    }
}