数独和 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);
}
繁星点点滴滴1回答
-
慕村9548890
您可以在所选单元格的正方形中向单元格添加一个突出显示类：<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)}
随时随地看视频慕课网APP
相关分类
JavaScript