纯HTML:
<div class="table-tr museo_sans500">
<div class="table-td"><a href="javascript:void(0)">fgfbgfbfg</a></div>
<div class="table-td"><a href="javascript:void(0)">Wtrtrdgdgf</a></div>
<div class="table-td"><a href="javascript:void(0)">Wayne Rooney</a</div>
<div class="table-td"><a href="javascript:void(0)">fghgfhgfhgf</a></div>
</div>
<div class="table-tr museo_sans500">
<div class="table-td"><a href="javascript:void(0)"hgfhgfhfg</a></div>
<div class="table-td"><a href="javascript:void(0)">asdasdasdas</a></div>
<div class="table-td"><a href="javascript:void(0)">testsfsdfs</a></div>
<div class="table-td"><a href="javascript:void(0)">gfhgfhfghgf</a></div>
</div>
我需要使它动态,我使用Angular JS和PHP。我已经在角$scope.teamSquad
中获得数据,并以以下方式实现:
<div class="table-tr museo_sans500" ng-repeat="(key,squad) in teamSquad">
<div class="table-td"><a href="javascript:void(0)">{{squad.PlayerName}}</a></div>
</div>
但是我在每增加一个值之后添加</div><div class="table-tr museo_sans500">
有问题。
我已经尝试过{{key%4==0 ? '</div><div class="table-tr museo_sans500">' : ''}}
,但它不起作用。
我也试过了,但结果还是一样
正如@entre所说,您应该使用嵌套的ng-repeat来完成此任务
<div class="table-tr museo_sans500" ng-repeat="squadChunk in teamSquad">
<div class="table-td" ng-repeat="squad in squadChunk"><a href="javascript:void(0)">{{squad.PlayerName}}</div>
</div>
将数组分割成块(大小为4)
var _teamSquad = [
{PlayerName: 1},
{PlayerName: 2},
{PlayerName: 3},
{PlayerName: 4},
{PlayerName: 5},
{PlayerName: 6},
{PlayerName: 7},
{PlayerName: 8}
];
$scope.teamSquad = [];
var size = 4;
while (_teamSquad.length > 0)
$scope.teamSquad.push(_teamSquad.splice(0, size));
全面解决方案