ng-repeat ng ng-repeat-start

Question

一个angularJS的初学者，当在ng-repeat-start中尝试ng-repeat时，页面会间歇性地断开，并在浏览器中显示angularjs代码。

<table>
   <tr ng-repeat-start="(key, value) in obj">{{key}}</tr>
   <tr ng-repeat="v in value">
      <div>{{v.address}}</div>
      <div>{{v.mobile}}</div>
   </tr>
   <tr ng-repeat-end></tr>
</table>

正在尝试确定这将如何在浏览器中工作。有人知道这段代码会崩溃的原因是什么吗？

obj模型结构：

{"name1":
  [{
    "address":"",
    "mobile":""
  },{
    "address":"",
    "mobile":""
  }],
"name2":
  [{
    "address":"",
    "mobile":""
  },{
    "address":"",
    "mobile":""
  }]
}

忘记提到间歇性接收到的错误：http://docs.angularjs.org/error/$compile:uterdir?p0=ng-repeat-start&p1=ng-repeat-end

到目前为止找到的解决方案

在ng-repeat-start like中使用了嵌套的ng-repeat，而不是ng-repeat

<table>
   <tr ng-repeat="(key, value) in obj">
       <td>{{key}}</td>
       <td>
           <table>
               <tr ng-repeat="v in value">
                  <div>{{v.address}}</div>
                  <div>{{v.mobile}}</div>
               </tr>
           </table>    
       </td>
   </tr>
</table>

Answer 1

你提到“间歇性的分页”，这里的关键可能是“间歇性的”--这意味着你得到了FOUC (无样式内容的flash)。找到答案的一个地方是Angular Tips and Tricks，这是一个不断更新的各种整洁事物的集合。对于FOUC，Sofer建议尝试ng-bind或ng-cloack。我不确定哪种方法可以在这里工作(还有其他技巧)，但是你可以从检查documentation on ng-cloak开始。这至少可以为您指明一个正确的方向，告诉您如何在所有内容都编译完成之前保持ng-repeat不起作用(显示)。

Answer 2

前几天我也在寻找同样的东西来动态创建一个包含X行和Y列的表。这是我想出来的: JS：

​

var MainCtrl = function() {
  this.rows = (function() {
    var x = 10;
    var y = 10;
    var rowArr = [];
    for (var i = 0; i < x; i++) {
      var cellArr = {
        cells: []
      };
      for (var j = 0; j < y; j++) {
        var cell = {};
        cell.x = j;
        cell.y = i;
        cellArr.cells.push(cell);
      }
      rowArr.push(cellArr);
    }
    return rowArr;
  })();
};
angular
  .module('app', [])
  .controller('MainCtrl', MainCtrl);

​

HTML：

​

<table>
  <tbody ng-controller="MainCtrl as main">
    <tr ng-repeat="row in main.rows">
      <td ng-repeat="cell in row.cells" x="{{cell.x}}" y="{{cell.y}}">        
      </td>
    </tr>
  </tbody>
</table>

​