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-app="myApp">
    <div ng-controller="Main">
        <table>
            <tr ng-repeat="row in rows">
                <td>{{row.name}}</td>
                <!-- for column in column -->
                <!-- If column.type is single have single td -->
                <!-- If column.type is double have two td -->
                <td>{{$index}}</td>
            </tr>
        </table>
    </div>
</div>
<!-- Desired output -->
<table>
    <tr>
        <td>first</td>
        <!-- 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 = [{
        name: 'first',
        columns: [{
            type: 'single',
            name: 'col1'
        }, {
            type: 'double',
            name: 'col2'
        }]
    }];
}