对表格行使用 ng-repeat [英] Using ng-repeat with table rows
问题描述
我正在尝试将模型中的数据插入到模板中,但我想在每 7 次重复后添加一个新的表格行.使用基于 strign 的模板,我可以使用迭代索引和模很容易地做到这一点,但我无法弄清楚如何使用 angular 的 DOM 模板来做到这一点.
这是 HTML:
<table cellpacing="0" cellpadding="0"><colgroup span="7"></colgroup><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="星期四">星期四</th><th scope="col" title="Friday">Fri</th><th scope="col" title="周六">周六</th><th scope="col" title="Sunday">Sun</th></tr><tr><td ng-repeat="日期中的日期">{{ 日期 }}<!-- 经过七次迭代后,应该添加一个新的 `<tr>` --></td></tr></tbody>和 javascript 类似:
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) {返回 $scope.dates = monthDays;});
您可以在此处查看 JSFiddle 中的代码:http://jsfiddle.net/3zhbB/2/
解决方案 使 $scope.dates
成为包含天数的数组.
里面的每个数组都是一行,行数组里面的每一天都是一天
查看更新的 JSFiddle http://jsfiddle.net/6aqtj/1/
I'm trying to insert data from a model into a template but I want to add a new table row after every 7 repetitions. With strign-based templates I could do it quite easily using the iteration index and modulo but I can't quite figure out how to do this using angular's DOM templates.
Here's the 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>
And the javascript it something like:
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;
});
You can view the code in a JSFiddle here: http://jsfiddle.net/3zhbB/2/
解决方案 Make $scope.dates
an array of arrays with the days.
Each array inside of it is a row, and each day inside of the row's array is a day
See this updated JSFiddle http://jsfiddle.net/6aqtj/1/
这篇关于对表格行使用 ng-repeat的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆