Ng-repeat and Angularjs Beginner Error

Asked

Viewed 601 times

1

I’m starting at the angular and I still don’t quite 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>

Doubts in ng-repeat="row in board track by $index" he will pick up each item from Scope row and will add to 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;
}

In the firebug appears

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

What I’m doing wrong?

angularjs angularjs-directives angularjs-scope

1 answer

0


Let’s go in pieces.

  1. ng-repeat="row in board track by $index"
    Every item within the array board, a new <div class="row"> and a new <div class="gol-cell"..... </div> that is, everything you put inside the div of the ng-repeat, will be created every Row. If you have 10 items, 10 Divs will be created.
  2. ng-repeat="gol-cell in row track by $index"
    Every item within the array Row, looks like you’re not creating anything. And add "-" (hifen) on behalf of variables was never something correct Try to put the name of the variable within the norms, example: golCell.

Maybe this is the mistake. Post feedback.

  • 1

    In item 1, the div that will be repeated is the <div class="row">.

  • True, and a gol-Cell.

  • 1

    Thanks @lordcheat. It was very clear your explanation. I was confusing the name of the classes with the name of the arrays. : ) I will follow your hint.

Browser other questions tagged angularjs angularjs-directives angularjs-scope

You are not signed in. Login or sign up in order to post.