AngularJS Table Demo

Demo to show how to create table with dynamic rows and columns based on user input.

HTML

<section id="ng-app" data-ng-app="myApp">
    
    <section data-ng-controller="myAppController as vm">
    
        <input type="number" data-ng-model="vm.rows" />
        <input type="number" data-ng-model="vm.cells" />
        
        <br/><br/>
        
        <table>
            <tr data-ng-repeat="row in vm.getNumber(vm.rows)|limitTo:13 track by $index">
                <td data-ng-repeat="cell in vm.getNumber(vm.cells)|limitTo:13 track by $index">{{$index + 11}}</td>
            </tr>
        </table>
        
    </section>
</section>

CSS

input, td {
    font: 12px Arial, Helvetica, sans-serif;
    padding: 5px;
    border: 1px solid;
}

JavaScript

/**
* This was in response to a question that came up on a forum
*/

// myApp.js
(function() {
    
    'use strict';
    
    function config() {
        // Whatever you need here
    }
    
    function run() {
        // Whatever you need here
    }
    
    angular
        .module('myApp', [])
        .config(config)
        .run(run);
    
})();

// myAppController.js
(function() {
    
    function myAppController() {
        var vm = this;
        vm.rows = 3;
        vm.cells = 5;
        
        // ngRepeat will only use an Array
        vm.getNumber = function(num) {
            return new Array(num);
        };
    }
    
    angular
        .module('myApp')
        .controller('myAppController', myAppController);
    
})();