提前感谢您的阅读。我正在尝试利用angular的 ng-repeat 将数组中的对象渲染到Nx3表中。为了举例,让我们考虑一个3x3表。
以下是数组的简化示例:
objects = [{"text": "One, One"},{"text": "One, Two"},{"text": "One, Three"},
{"text": "Two, One"},{"text": "Two, Two"},{"text": "Two, Three"},
{"text": "Three, One"},{"text": "Three, Two"},{"text": "Three, Three"}];
“text”字段描述了3x3网格矩阵中每个元素应出现的位置。我想在对象上使用ng-repeat来生成如下所示的html:
<table>
<tr>
<td>One, One</td>
<td>One, Two</td>
<td>One, Three</td>
</tr>
<tr>
<td>Two, One</td>
<td>Two, Two</td>
<td>Two, Three</td>
</tr>
<tr>
<td>Three, One</td>
<td>Three, Two</td>
<td>Three, Three</td>
</tr>
</table>
有没有办法实现这一点,而无需将数组拆分为每行的单独数组?
答案 0 :(得分:4)
最好的方法是改变控制器中的视图模型并将其绑定到ng-repeat(但是你已经说过你不想这样做)。如果您计划采用该路线,您还可以查看用户@m59 answer,在那里他创建了一个可重复使用的过滤器。然而,这只是一个简单的答案,利用内置过滤器的可配置评估表达式,我们可以返回truthy / falsy值来确定它们是否需要重复。这最终只有不需要创建2 ng-repeat块的唯一优势(但这并不是那么糟糕)。所以在你的控制器中添加一个关于范围的函数,
$scope.getFiltered= function(obj, idx){
//Set a property on the item being repeated with its actual index
//return true only for every 1st item in 3 items
return !((obj._index = idx) % 3);
}
并在您的视图中应用过滤器:
<tr ng-repeat="obj in objects | filter:getFiltered">
<!-- Current item, i.e first of every third item -->
<td>{{obj.text}}</td>
<!-- based on the _index property display the next 2 items (which have been already filtered out) -->
<td>{{objects[obj._index+1].text}}</td>
<td>{{objects[obj._index+2].text}}</td>
</tr>
<强> Plnkr 强>
答案 1 :(得分:0)
我想做同样的事情。
我有一个数组,我想将其转换为列大小为4的网格/矩阵。以下实现对我有用。您可以在嵌套的ng-repeat
旁边使用两个计数器:row和col在我的情况下,列数是3.但是你可以用变量替换那个3。 h.seats
是我的对象数组,我想根据该数组中元素的值打印X或 -
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
<td>{{row+1}}</td>
<td class="text-primary"
ng-repeat="(col, t) in h.seats track by $index"
ng-if="col >= (row)*3 && col < (row+1)*3">
<span ng-show="t.status"> X </span>
<span ng-show="!t.status"> - </span>
</td>
</tr>
</tbody>
</table>
</div>
<th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th>
打印标题行,列号位于顶部。 getNumber(h.seats.length, 3)
返回该表的行数,如下所示
.controller('CustomViewController', function ($scope, Principal, $state) {
$scope.getNumber = function(length, columns) {
return new Array(parseInt(length / columns + 1, 10));
}
行ng-if="col >= (row)*3 && col < (row+1)*3"
是计算应该在该行中放置哪些元素的重要逻辑。
输出如下所示
0 1 2 3
1 e1 e2 e3
2 e4 e5 e6
3 e7 e8
有关如何使用行和列计数器的详细信息,请参阅以下链接: https://stackoverflow.com/a/35566132/5076414