Fatal编程技术网

Javascript AnuglarJS中的数独

javascript jquery css angularjs

Javascript AnuglarJS中的数独,javascript,jquery,css,angularjs,sudoku,Javascript,Jquery,Css,Angularjs,Sudoku,所以，我有一个数独生成器，当通过API访问时，它生成一个数独板（JSON数组），然后在一个表格中使用AngularJS和ng repeat，我将数独板显示在页面上 到目前为止，这就是我所拥有的。我想要实现的是突出显示框中的所有元素以及行和列。现在，行和列高亮显示，但我如何也高亮显示下图中标记为黄色的元素，因为这些元素属于框： 以下是我的HTML代码： <body ng-app="Sudoku"> <!-- SUDOKU BOARD --> <div c

所以，我有一个数独生成器，当通过API访问时，它生成一个数独板（JSON数组），然后在一个表格中使用AngularJS和ng repeat，我将数独板显示在页面上

到目前为止，这就是我所拥有的。我想要实现的是突出显示框中的所有元素以及行和列。现在，行和列高亮显示，但我如何也高亮显示下图中标记为黄色的元素，因为这些元素属于框：

以下是我的HTML代码：

<body ng-app="Sudoku">
<!--    SUDOKU BOARD    -->
<div class="sudoku-game" ng-controller="SudokuController">
    <table class="sudoku-board" ng-init="getSudoku()">
        <tbody>
            <tr ng-repeat="sudoku in sudokuGrid track by $index" ng-init="row = $index" class="sudoku-row" ng-class="{'highlight':rowSelected === row}">
                <td ng-repeat="number in sudoku track by $index" ng-init="col = $index" class="sudoku-col" ng-class="{'highlight':colSelected === col}">
                    <div class="sudoku-cell" ng-class="{'selected':isSelected === ((row*10) + col)}" ng-click="selectedCell(row, col)" ng-keyup="insertNum($event)" tabindex="1">
                        <span class="prevalued" ng-if="number !== null" ng-bind="number"></span>
                        <span class="emptycell" ng-if="number === null" ng-bind="emptyCell"></span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
以下是我如何从API获取JSON格式的数独板数据：

[
  [
    9,
    2,
    null,
    null,
    null,
    null,
    null,
    3,
    8
  ],
  [
    5,
    4,
    3,
    9,
    null,
    null,
    7,
    null,
    null
  ],
  [
    null,
    null,
    null,
    3,
    null,
    null,
    null,
    null,
    null
  ],
  [
    1,
    7,
    null,
    null,
    3,
    9,
    4,
    5,
    null
  ],
  [
    8,
    3,
    5,
    null,
    1,
    null,
    null,
    9,
    null
  ],
  [
    null,
    9,
    2,
    5,
    7,
    6,
    null,
    1,
    3
  ],
  [
    null,
    1,
    8,
    null,
    null,
    5,
    null,
    2,
    null
  ],
  [
    null,
    null,
    null,
    6,
    null,
    null,
    null,
    7,
    null
  ],
  [
    null,
    null,
    4,
    2,
    null,
    null,
    null,
    8,
    null
  ]
]
可以将高亮显示类添加到位于选定单元格正方形中的单元格：

<div class="sudoku-cell" ng-class="{
  'selected':isSelected === ((row*10) + col),
  'highlight': isHighlight(row, col),
}" ng-click="selectedCell(row, col)" ng-keyup="insertNum($event)" tabindex="1">
隐马尔可夫模型。。我明白了这一点，但是现在每个单元格都突出显示了：查看下面的链接@VictorGavrilovic看看这个例子是的，明白了-我试图做一些类似的事情，但是，我仍然无法让它与AngularJS一起工作。。你知道在HTML代码中要修改什么吗？
for（让i=0；i<9；i++）{for（让j=0；j<9；j++）{if（Math.floor（i/3）==Math.floor（$scope.rowSelected/3）和&Math.floor（j/3）==Math.floor（$scope.colSelected/3））{console.log（“i:j:”）；console.log（（i*10）+j）；}else{console.log（“Empty”）；}}}}
我在我的控制器中添加了这个，使用上面的代码，在HTML中我只得到最后一个，这是我在div中的内容：
<div class="sudoku-cell" ng-class="{
  'selected':isSelected === ((row*10) + col),
  'highlight': isHighlight(row, col),
}" ng-click="selectedCell(row, col)" ng-keyup="insertNum($event)" tabindex="1">

$scope.isHighlight = function (row, col) {
  // Add debugging functions
  //
  console.log({
    row,
    rowSelected: $scope.rowSelected,
    col,
    colSelected: $scope.colSelected,
  });
  // Return the boolean
  //
  return Math.floor(row / 3) === Math.floor($scope.rowSelected / 3) 
    && Math.floor(col / 3) === Math.floor($scope.colSelected / 3)
}