Question

我开始使用AngularJS编程，我的第一个项目是数独求解器。如果用户将值写入输入框，我想验证该值。如果游戏规则成立，则值有效（每行，col和2x3框仅包含1到6的数字一次）。如果值无效，我想让输入元素的边框变为红色。

SudokuController.js：

 (function (angular) {

SudokuController.$inject = ['$scope'];
function SudokuController($scope) {
    function Cell(row, column) {
        this.row = row;
        this.column = column;
    }
    //initialize out sudoku puzzle object
    $scope.puzzle = {};
    $scope.puzzle.dimensions = 6;
    $scope.puzzle.board = [$scope.puzzle.dimensions];
    $scope.puzzle.moves = [];

    $scope.initialize = function () {
            //initialize the gameboard with empty values
            for (var i = 0; i < $scope.puzzle.dimensions; i++) {
                $scope.puzzle.board[i] = [$scope.puzzle.dimensions];
                for (var j = 0; j < $scope.puzzle.dimensions; j++) {
                    $scope.puzzle.board[i][j] = undefined;
                }
            }
            initialized = true;
        }

    //other functions:
}

angular
    .module('sudokuApp')
    .controller('SudokuController', SudokuController);})(window.angular);

Layout.cshtml

    <div ng-controller="SudokuController" class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
            <form role="form" class="center-block" style="width: 1100px; height: 200px; margin-top:100px;">
                <div ng-repeat="row in [0,1,2,3,4,5]" class="row solverrow ">
                    <div ng-repeat="column in [0,1,2,3,4,5]" class="col-sm-1 nopadding {{ row | rowFilter }} {{ column | columnFilter }} ">
                        <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                               type="number" maxlength="1" class="form-control text-center" ng-model="puzzle.board[row][column]"
                                name="cell[]">
                    </div>
                </div>
            </form>
            <div class="row angmenu">
                <button type="button" class="btn btn-primary" ng-click="initialize()">Initialize</button>
                <button type="button" class="btn btn-generate" ng-click="generate()">Generate new board</button>
                <button type="button" class="btn btn-success" ng-click="solve()">Solve</button>
            </div>
        </div>

基本上我想要的是用相关行，列和框中已经输入的值检查新的类型值，并在值无效时动态更改边框。

提前致谢！

基于ng-model值的HTML元素的CSS样式

0 个答案: