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-styleを適用しているもの）には内容がありません。したがって、コンテンツを追加したり、幅や高さにスタイルを追加したりしない限り、表示されません。

Answer 2

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

Answer 3

問題は、子div（2番目の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>