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 column -->
            <!-- If column.type is single have single td -->
            <!-- If column.type is double have two td -->
            <span ng-repeat-start="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 column -->
        <!-- 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 = [{        
        columns: [{
            type: 'single',
            name: 'col1'
        }, {
            type: 'double',
            name: 'col2'
        }]
    };
}