0

純粋な 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 を使用しています。私はすでにAngularでデータを取得して$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">' : ''}}ましたが、うまくいきません。

私も試しましたが、結果は同じでした。

4

1 に答える 1

1

@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));

完全なソリューション

于 2015-09-14T12:31:02.890 に答える