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样式的div)没有任何内容。因此，除非您添加内容或附加样式使其具有宽度和高度，否则它不会显示出来。

Answer 2

问题似乎是子div中缺少的内容(第二个ng-repeat)。

​

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>

​