所以,我有一个数独生成器,当通过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>
这是我在JavaScript中为selectedCell(row,col)函数使用的代码
$scope.getCellPosition = function (row, col) {
return (row * 10) + col;
}
$scope.selectedCell = function (row, col) {
$scope.isSelected = $scope.getCellPosition(row, col);
$scope.rowSelected = row;
$scope.colSelected = col;
console.log($scope.isSelected);
}
这是我如何通过JSON格式从API获取Sudoku Board数据的方法:
[
[
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': Math.floor(row / 3) === Math.floor(rowSelected / 3)
&& Math.floor(col / 3) === Math.floor(colSelected / 3)
}" ng-click="selectedCell(row, col)" ng-keyup="insertNum($event)" tabindex="1">