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?