拆分NG-重复每3个项目 [英] Splitting ng-repeat every 3 items
问题描述
使用AngularJS，我遍历包含事件对象的数组JSON对象，包含竞争对象的数组。
我想在一个表中显示每个事件，然后每个竞争在 TD ，但每排只有三个单元格
我使用的是NG-重复返回为每个事件表的列表，但我在与分裂比赛陷入麻烦一个新的＆LT; TR＆GT; 每三个＆LT; TD＆GT; 取值
除了从JSON重建自己的大质量天体，是什么做什么，我描述角的最佳方式？
当前视图：
＆LT;表NG-重复=上市在上市＆GT;
＆所述; TR＆GT;
百分位列跨度=3＆GT; {{listing.name}}＆下; /第i
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD NG重复=，在listing.competitions竞争＆GT;
{{competition.id}} - {{competition.name}}
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
所需的输出：
＆LT;表＆gt;
＆所述; TR＆GT;
百分位合并单元格=3＆GT;事件名称＆LT; /第i
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;竞争ID - 竞争名称和LT; / TD＆GT;
＆LT; TD＆GT;竞争ID - 竞争名称和LT; / TD＆GT;
＆LT; TD＆GT;竞争ID - 竞争名称和LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;竞争ID - 竞争名称和LT; / TD＆GT;
＆LT; TD＆GT;竞争ID - 竞争名称和LT; / TD＆GT;
＆LT; TD＆GT;竞争ID - 竞争名称和LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
控制器：
app.controller（'EventsCtrl'，函数（$范围，$ HTTP）{
$ scope.loading = TRUE; $ http.get（'脚本/ JSON / events.json'），然后（功能（响应）{
VAR上市=响应['数据']事件。 $ scope.listings =清单;
}）;
}）;
events.json
{
事件：
{
ID：418，
名：等ullamco
比赛：[
{
ID：933，
名：魁在deserunt occaecat等
的startTime：1381092189
}，
{
ID：853，
名：欧盟enim前incididunt做，
的startTime：1380708266
}，
{
ID：5738，
名：广告EST UT aliquip等
的startTime：1381366623
}，
{
ID：7599，
名：坐前voluptate aliqua悲
的startTime：1381284106
}，
{
ID：7481，
名：laborum consequat deserunt做aliqua
的startTime：1380874273
}，
{
ID：3441，
名：阿梅德重新prehenderit SINT必须遵守proident
的startTime：1380554850
}，
{
ID：1959年，
名：在voluptate ullamco微量微量
的startTime：1380651981
}
]
}，
您使用的是表，但数据的语义表示你有一个列表的列表。你应该考虑这个输出＆LT; UL＆GT;＆LT;李方式＆gt; ，而不是一格
＆LT; UL NG重复=上市在上市＆GT;
＆LT;立GT;
＆LT; H2＆GT; {{listing.name}}＆LT; / H＆GT;
＆LT; UL NG重复=，在listing.competitions竞争＆GT;
＆LT;立GT;
{{competition.id}} - {{competition.name}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
可以实现与CSS很容易使用上述HTML你想要的布局。收银台Twitter的引导或基金会的块网格的例子。表一般应只用于实际上是表格数据。
但是...
你的问题并仍然承受回答，因为可能还有其他原因在你建议的方式交替模板。你可以使用一个功能这一次得到的东西三：
＆LT;表NG-重复=上市在上市＆GT;
＆所述; TR＆GT;
百分位列跨度=3＆GT; {{listing.name}}＆下; /第i
＆LT; / TR＆GT;
＆LT; TR NG重复=竞赛组＆GT;
＆LT; TD NG重复=竞赛组＆GT;
{{competition.id}} - {{competition.name}}
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
在您的控制器，您可以创建一个名单表绑定到嵌套的中继器
//从Fresheyeball的解决方案改编$ scope.competitions = []
compSet = []
对于（VAR我;我＆LT; $ scope.listings.competitions;我++）{
VAR竞争= $ scope.listings.competitions [I]
如果（ⅰ％3）{
$ scope.competitions.push（compSet）;
compSet = [];
}
compSet.push（竞争）;
}
Using AngularJS, I'm iterating over a JSON object containing an array of event objects, containing an array of competition objects.
I wish to show each event in a table, and then each competition in a td, but only three cells per row
I'm using ng-repeat to return a list of tables for each event, but I'm having trouble with splitting the competitions into a new <tr> every three <td>s
Aside from rebuilding my own massive object from the JSON, what is the best way to do what I'm describing in Angular?
Current view:
<table ng-repeat="listing in listings">
<tr>
<th colspan="3">{{listing.name}}</th>
</tr>
<tr>
<td ng-repeat="competition in listing.competitions">
{{competition.id}} - {{competition.name}}
</td>
</tr>
</table>
Desired output:
<table>
<tr>
<th colspan="3">Event Name</th>
</tr>
<tr>
<td>competition id - competition name</td>
<td>competition id - competition name</td>
<td>competition id - competition name</td>
</tr>
<tr>
<td>competition id - competition name</td>
<td>competition id - competition name</td>
<td>competition id - competition name</td>
</tr>
</table>
Controller:
app.controller('EventsCtrl', function ($scope, $http) {
$scope.loading = true;
$http.get('scripts/JSON/events.json').then(function (response) {
var listings = response['data'].events;
$scope.listings = listings;
});
});
events.json
{
"events": [
{
"id": 418,
"name": "et ullamco",
"competitions": [
{
"id": 933,
"name": "qui in deserunt occaecat et",
"startTime": 1381092189
},
{
"id": 853,
"name": "eu enim ex incididunt do",
"startTime": 1380708266
},
{
"id": 5738,
"name": "ad est ut aliquip et",
"startTime": 1381366623
},
{
"id": 7599,
"name": "sit ex voluptate aliqua dolor",
"startTime": 1381284106
},
{
"id": 7481,
"name": "laborum consequat deserunt do aliqua",
"startTime": 1380874273
},
{
"id": 3441,
"name": "amet reprehenderit sint sunt proident",
"startTime": 1380554850
},
{
"id": 1959,
"name": "ullamco minim minim in voluptate",
"startTime": 1380651981
}
]
},
You are using a table but the semantics of your data indicate you have a list of lists. You should consider outputting this with <ul><li> instead of a grid.
<ul ng-repeat="listing in listings">
<li>
<h2>{{listing.name}}</h2>
<ul ng-repeat="competition in listing.competitions">
<li>
{{competition.id}} - {{competition.name}}
</li>
</ul>
</li>
</ul>
You can achieve your desired layout with CSS quite easily using the above HTML. Checkout the "block grids" in Twitter Bootstrap or Foundation for examples. Tables should generally be used only for data that is actually tabular.
However...
You're question does still bear answering since there may be other reasons to alternate templates in the way you suggest. You could use a function for this to get things three at a time:
<table ng-repeat="listing in listings">
<tr>
<th colspan="3">{{listing.name}}</th>
</tr>
<tr ng-repeat="group in competitions">
<td ng-repeat="competition in group">
{{competition.id}} - {{competition.name}}
</td>
</tr>
</table>
In your controller you can create a "list of lists" to bind to the nested repeaters
// Adapted from Fresheyeball's solution
$scope.competitions = []
compSet = []
for(var i; i < $scope.listings.competitions; i++){
var competition = $scope.listings.competitions[i];
if( i % 3 ){
$scope.competitions.push(compSet);
compSet = [];
}
compSet.push(competition);
}
这篇关于拆分NG-重复每3个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
