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中使用嵌套的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（闪烁的无格式内容）。一个可以找到答案的地方是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>

ng-repeat在ng-repeat-start中

2 个答案: