Стиль CSS для элемента HTML на основе значения ng-модели - PullRequest
0 голосов
/ 17 мая 2018

Я начал программировать с AngularJS, и мой первый проект - решение судоку.Если пользователь записывает значение в поле ввода, я хочу проверить это значение.Значение действует, если правила игры соблюдены (каждая строка, столбец и поле 2х3 содержат цифры от 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>

Поэтому в основном я хочу проверить новое введенное значение со значениями, уже введенными в соответствующие строки, столбцы и поля, и динамически изменить границу, если значение недопустимо.

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...