How to make an empty grid with angularJS ng-repeat?

Question

I am trying to make an empty grid using angularJS, I am 2 days new to it so I dont know much, this is what makes sense to me:

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>

    <script>
        var app = angular.module('calendar',[]);

        app.controller('WeekMakerCtrl', function(){
                for(i = 0; i < 12; i++){
                    this.rows.push("<tr> <tb>1</tb> <tb>2</tb> </tr>");
                }
            });
    </script>

  </head>
  <body>
    <div ng-controller="WeekMakerCtrl as week">
        <table>
            <p ng-repeat="row in week.rows">{{row}}</p>
        </table>
    </div>
  </body>
</html>

but it doesn't display anything, what is wrong with it? PS: please don't over complicate an answer, remember that I am a newbie. thanks a lot

Just write the html inside the ng-repeat

Lee Brindley
– Lee Brindley

2014-08-15 02:10:40 +00:00
Commented Aug 15, 2014 at 2:10 — Lee Brindley
– Lee Brindley, Commented Aug 15, 2014 at 2:10

Jason Winnebeck · Accepted Answer · 2014-08-15 02:21:49Z

3

The model (rows) should contain data, not markup. The view template (the HTML) should contain the HTML. It should be something like:

this.rows.push({colA: 1, colB: 2})

Then your HTML would look like:

<table>
  <tr ng-repeat="row in week.rows">
    <td>{{row.colA}}</td>
    <td>{{row.colB}}</td>
  </tr>
</table>

Per PSL's comment, you may need also to change your ng-app attribute to ng-app="calendar", and you need to initialize this.rows to an empty array in the controller (this.rows = []) before you can .push on it.

edited Aug 15, 2014 at 2:21

answered Aug 15, 2014 at 2:15

Jason Winnebeck

1,3041 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Winnebeck Over a year ago

Thanks @PSL, I think you're right. Documentation says that ng-app module name is optional but maybe that's when you are doing the extremely basic examples where controllers are global functions. I'll add that to the post.

Collectives™ on Stack Overflow

How to make an empty grid with angularJS ng-repeat?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related