1

Estou iniciando no angular e ainda não entendo bem o workflow do mesmo. O código abaixo não funciona:

<body ng-app>
 ...
<div ng-controller="Grid" class="gol-grid">
        <div class="row" ng-repeat="row in board track by $index">
            <div class="gol-cell" ng-repeat="gol-cell in row track by $index" ng-class="{alive: gol-cell.isAlive}"></div>
        </div>
    </div>

Dúvidas no ng-repeat="row in board track by $index" ele pegará cada item do scope row e adicionará a div com a classe row?

Segue o script js

function Grid($scope) {
var SIZE = 50;
$scope.board = [];

function Cell(x, y, alive) {
    this.x = x;
    this.y = y;

    this.isAlive = alive;

}

for(var i = 0; i<SIZE; i++) {
    var row = [];
    for (var j=0; j<SIZE; j++) {
        row.push(new Cell(i, j, Math.random() > 0.5));
    }
    $scope.board.push(row);

}
}

E o css:

.gol-grid{
    position: absolute;
    z-index: -1;
    top:0px;
    width: 100%;
}
.gol-cell{
    margin: 0; padding:0; border: 0; display: inline-block;
    width: 10px; height: 10px;
}
.alive {
    background-color: rgba(0,0,0,0.1);
}
.row{
    line-height: 0;
}

No firebug aparece

[ngRepeat:iidexp] http://errors.angularjs.org/undefined/ngRepeat/iidexp?

O que estou fazendo errado?

1 Resposta 1

0

Vamos por partes.

  1. ng-repeat="row in board track by $index"
    A cada item dentro do array board, será criado uma nova <div class="row"> e uma nova <div class="gol-cell"..... </div> ou seja, tudo o que você colocar dentro da div do ng-repeat, será criado a cada row. Se você tem 10 itens, 10 divs serão criadas.
  2. ng-repeat="gol-cell in row track by $index"
    A cada item dentro do array row, parece que você não está criando nada. E adicionar "-" (hifen) em nome de variaveis nunca foi algo correto Tente colocar o nome da variavel dentro das normas, exemplo: golCell.

Talvez o erro seja este. Poste feedback.

3
  • 1
    No item 1, a div que será repetida é a <div class="row">. Commented 1/12/2014 às 20:52
  • Verdade, e a gol-cell. Commented 2/12/2014 às 11:41
  • 1
    Obrigado @lordcheat. Ficou bem claro sua explicação. Estava confundindo o nome das classes com o nome das arrays. :) Seguirei sua dica.
    – daemon
    Commented 6/12/2014 às 20:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .