angularjs – 使用表格行的ng-repeat

发布时间：2020-12-17 08:22:50 所属栏目：安全来源：网络整理

导读：我试图将模型中的数据插入模板，但是我想在每7次重复之后添加一个新的表行。使用基于strign的模板，我可以很容易地使用迭代索引和模数，但是我无法弄清楚如何使用angular的DOM模板。这里是HTML： div ng-controller="MyCtrl" table cellspacing="0" cellpad

我试图将模型中的数据插入模板，但是我想在每7次重复之后添加一个新的表行。使用基于strign的模板，我可以很容易地使用迭代索引和模数，但是我无法弄清楚如何使用angular的DOM模板。

这里是HTML：

<div ng-controller="MyCtrl">
  <table cellspacing="0" cellpadding="0">
   <colgroup span="7"></colgroup>

   <tbody>
     <tr class="days">
       <th scope="col" title="Monday">Mon</th>
       <th scope="col" title="Tuesday">Tue</th>
       <th scope="col" title="Wednesday">Wed</th>
       <th scope="col" title="Thursday">Thu</th>
       <th scope="col" title="Friday">Fri</th>
       <th scope="col" title="Saturday">Sat</th>
       <th scope="col" title="Sunday">Sun</th>
     </tr>
     <tr>
         <td ng-repeat="date in dates">
             {{ date }}
             <!-- After seven iterations a new `<tr>` should be aded -->
        </td>
     </tr>
 </tbody>
 </table>
</div>

和它的东西像：

myApp = this.angular.module('myApp',[]);

var monthDays = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,1516,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];

myApp.controller('MyCtrl',function($scope) {
  return $scope.dates = monthDays;
});?

您可以在JSFiddle中查看代码：http://jsfiddle.net/3zhbB/2/

使$ scope.dates数组的数组与天。

它中的每个数组都是一行，而行的数组的每一天都是一天

看到这个更新的JSFiddle http://jsfiddle.net/6aqtj/1/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!