JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<div ng-app="mapApp" ng-controller="editorController">
    <label>Length</label>
    <select ng-model="length" ng-options="length for length in sizes">
        </select>
    <table>
    <label>Width</label>
    <select ng-model="width" ng-options="width for width in sizes">
        </select>
    <table>
        <tbody>
            <tr ng-repeat="row in cells track by $index">
                <td ng-repeat="cell in row track by $index">
                    {{cell}}
                </td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

var myapp = angular.module('mapApp', []);

myapp.controller('editorController', function ($scope) {

    $scope.cells = [
        []
    ];
    $scope.sizes = [];

    makeSizes();

    $scope.length = $scope.sizes[0];
    $scope.width = $scope.sizes[0];
	
    $scope.$watch('[width,length]', makeMap, true);

    function makeMap() {
        var cols = $scope.width,
            rows = $scope.length;
		console.log('makeMap');
        $scope.cells = matrix(rows, cols, 'cell');
    }

    function matrix(rows, cols, defaultValue) {
		// code from here http://stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript
        var arr = [[]];

        // Creates all lines:
        for (var i = 0; i < rows; i++) {

            // Creates an empty line
            arr[i] = [];

            // Adds cols to the empty line:
            arr[i] = new Array(cols);

            for (var j = 0; j < cols; j++) {
                // Initializes:
                arr[i][j] = defaultValue;
            }
        }

        return arr;
    }

    makeMap();

    function makeSizes() {
        for (var i = 0; i < 5; i++) {
            $scope.sizes.push(i + 3);
        }
    }
    
});