ng-style不工作/更新

Question

我在我的html文件中有这个代码。 我希望在程序运行时显示一个方形游戏板，其中ng-style更新background-color 。

<div class="row" ng-repeat="col in board">
        <div class="column" ng-style="{'background-color': colour($parent.$index, $index)}" ng-repeat="row in col track by $index"></div>
</div>

现在， colour功能只返回一种颜色， board设置如下：

function setUp() {
    $scope.board=[];
    for (var i = 0; i < BOARD_SIZE; i++) {
        $scope.board[i] = [];
        for (var j = 0; j < BOARD_SIZE; j++) {
            $scope.board[i][j] = false;
        }
    }
}

$scope.colour = function(col, row) {
    return '#e6e6e6';
}

当我试图运行它时，没有任何显示。 我希望它应该在屏幕上显示一个正方形。

Answer 1

你的内部div（你正在应用ng风格的那个）没有内容。 因此，除非您添加内容或另外将其设置为具有宽度和高度，否则它将不会显示。

Answer 2

问题似乎是子div中缺少的内容（第二次重复）。

 function MyController($scope) { var BOARD_SIZE = 10; function setUp() { $scope.board = []; for (var i = 0; i < BOARD_SIZE; i++) { $scope.board[i] = []; for (var j = 0; j < BOARD_SIZE; j++) { $scope.board[i][j] = false; } } } $scope.colour = function (col, row) { return '#e6e6e6'; } setUp(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app ng-controller="MyController"> <div class="row" ng-repeat="col in board"> <div class="column" ng-style="{'background-color': colour($parent.$index, $index)}" ng-repeat="row in col track by $index">{{row}}</div> </div> </div> 

如果您不打算插入内容，则应修复高度和宽度（我使用了您的column类）

 function MyController($scope) { var BOARD_SIZE = 10; function setUp() { $scope.board = []; for (var i = 0; i < BOARD_SIZE; i++) { $scope.board[i] = []; for (var j = 0; j < BOARD_SIZE; j++) { $scope.board[i][j] = false; } } } $scope.colour = function (col, row) { return '#e6e6e6'; } setUp(); } 

 .column { height: 20px; width: 60px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app ng-controller="MyController"> <div class="row" ng-repeat="col in board"> <div class="column" ng-style="{'background-color': colour($parent.$index, $index)}" ng-repeat="row in col track by $index"></div> </div> </div>