如何使用angularJS ng-repeat制作空网格?

时间:2014-08-15 02:07:41

标签: javascript html5 angularjs

我正在尝试使用angularJS创建一个空网格,我是2天新的,所以我不太了解,这对我来说是有道理的:

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

但它没有显示任何东西,它有什么问题? PS:请不要让答案复杂化,记住我是新手。非常感谢

1 个答案:

答案 0 :(得分:3)

模型(行)应包含数据,而不是标记。视图模板(HTML)应包含HTML。它应该是这样的:

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

然后你的HTML看起来像:

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

根据PSL的评论,您可能还需要将ng-app属性更改为ng-app="calendar",并且需要将this.rows初始化为控制器中的空数组(this.rows = []在你可以.push之前。