AngularJS 中的数独
Posted
技术标签:
【中文标题】AngularJS 中的数独【英文标题】：Sudoku in AnuglarJS 【发布时间】：2020-07-12 15:04:48 【问题描述】：所以，我有一个数独生成器，当通过 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);
这就是我从 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
]
]
【问题讨论】：
【参考方案1】：您可以在所选单元格的正方形中添加一个突出显示类：
<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">
在你的 js 中：
$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)
【讨论】：
hmm.. 我明白了这里的意思，但是现在每个单元格都被突出显示：请查看以下链接 link @VictorGavrilovic 看看这个例子jsbin.com/losotetuva/1/edit?console 是的，明白了 - 我试图做类似的事情，但我仍然无法让它与 AngularJS 一起工作。有什么想法可以在 HTML 代码中更改吗？for (let i = 0; i < 9; i++) for (let 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*10) + col)" ng-click="selectedCell(row, col)" ng-keyup="insertNum($event)" tabindex="1">以上是关于AngularJS 中的数独的主要内容，如果未能解决你的问题，请参考以下文章
在 AngularJS 中缓存 HTTP 'Get' 服务响应？