javascript - AnuglarJS 中的数独
问题描述
所以,我有一个数独生成器,当通过 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
]
]
解决方案
您可以在所选单元格的正方形中向单元格添加一个突出显示类:
<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)
}
推荐阅读
- database - 数据冗余和数据不一致的区别
- amazon-web-services - 如何使用 S3 在 aws 中设置静态站点 - 是否有视觉指南?
- elasticsearch - 弹性搜索嵌套查询 - 如何仅基于嵌套文档的第一个实例进行过滤以回答过滤器
- vb.net - 在 PC 用户帐户被锁定时控制鼠标
- javascript - 如何根据单击的元素将不同的参数传递给函数?
- sparql - 如何在 WikiData Sparql 语句中获取 wdt 属性的标签?
- beautifulsoup - 试图在 Ebay 上抓取网页,但无法将信息提取到 EXCEL 表格中
- oracle-apex - 我可以通过单击一个按钮来禁用编辑多个表单吗
- php - 无法从安卓上传图片
- python - 我如何筛选特定碱基顺序的 DNA 序列并获得它们的位置?