Ng-repeat and AngularJs beginner error

1

I'm starting at angular and I still do not understand the workflow of it. The code below does not work:

<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>

Inquiries to ng-repeat="row in board track by $index" will fetch each item from scope row and add div with class row ?

Follow the js script

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);

}
}

And the 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;
}

firebug appears

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

What am I doing wrong?

    
asked by anonymous 01.12.2014 / 20:11

1 answer

0

Let's break it down.

  • ng-repeat="row in board track by $index"
    With each item inside the board array, a new <div class="row"> and a new <div class="gol-cell"..... </div> will be created, ie whatever you put inside the ng-repeat div will be created each row. If you have 10 items, 10 divs will be created.
  • ng-repeat="gol-cell in row track by $index"
    Each item inside the row array, it looks like you are not creating anything. And adding " - " (hifen) in the name of variables has never been right. Try to put the name of the variable within the rules, for example: golCell .
  • Maybe this is the error. Post feedback.

        
    01.12.2014 / 20:54