JSFiddle - React, Tailwind, and code Playground

by Kristopher Johnson

HTML

<div ng-app="SudokuApp" ng-controller="SudokuController">
    <h1>Sudoku Solver</h1>
    
    <div ng-cloak>
        <table>
            <tbody>
                <tr ng-repeat="row in rows">
                    <td ng-repeat="col in row track by col.id">
                        <input ng-model="col.value" type="text" maxlength="1"">
                    </td>
                </tr>
            </tbody>
        </table>
        <button>Solve</button>
        <button ng-click="clear()">Clear</button>
    </div>
    
</div>

CSS

input {
    width: 1em;
    text-align: center;
    border: 1px solid #ccc;
    padding: 0.5em;
}

button {
    margin-top: 1em;
}

JavaScript

angular.module('SudokuApp', [])

.controller('SudokuController', function($scope) {
    
    // Build 9x9 matrix
    var rows = [];
    for (var rowIndex = 0; rowIndex < 9; ++rowIndex) {
        var row = [];
        for (var colIndex = 0; colIndex < 9; ++colIndex) {
            var item = {
                rowIndex: rowIndex,
                colIndex: colIndex,
                id: "(" + rowIndex + "," + colIndex + ")",
                value: ""
            }
            row.push(item);
        }
        rows.push(row);
    }
    $scope.rows = rows;
    
    // Set all values empty
    $scope.clear = function() {
        for (var rowIndex = 0; rowIndex < 9; ++rowIndex) {
            for (var colIndex = 0; colIndex < 9; ++colIndex) {
                $scope.rows[rowIndex][colIndex].value = "";
            }
        }
    };
});