重复一组<td>s使用AngularJS在同一表行中

Repeating a set of <td>s in the same table row using AngularJS

本文关键字：AngularJS 使用 gt 一组 lt td      更新时间：2023-09-26

我想创建一个表，在其标题中包含两支球队的每个球员的名字。作用域有一个变量teams，它是Team对象的列表，每个对象都有一个Player对象列表作为属性。

事实证明，这比我预期的要困难得多。

<table>
  <thead>
    <tr>
      <div ng-repeat="team in teams">
        <th ng-repeat="player in team.players">{[ player.name ]}</th>
        <th>Partial Score</th>
        <th>Total Score</th>
      </div>
    </tr>
  </thead>
</table>

这是我脑海中最简单的事情，但这行不通。根据W3C（据我所知），不能将div放在表中，所以浏览器只需要将div放到表外。

我也尝试过指令，但这些都无济于事。这是我的指令文件的一个例子。

<th ng-repeat="player in team.players">{[ player.name ]}</th>
<th>Partial Score</th>
<th>Total Score</th>

例如，如果我有一个带有replace: 'false'的<player-initials>指令，浏览器会将非<th>元素从表中排出。设置replace: 'true'，修复了这个问题，但后来我得到了一个错误，因为指令中有多个根元素。我不能用任何东西包装指令中的元素，因为这会导致无效的HTML（如上所述）。

我已经尝试了元素和属性指令的所有组合和替换，没有什么能满足我的要求。有什么帮助吗？

在这里创建了一个小提琴。

希望这就是你想要的，如果不让我知道你想要的格式。您的HTML应该如下所示。

<table ng-repeat="team in teams">
    <tr>
       <td colspan="3"> 
            {{team.name}}
        </td>
    </tr>
    <tr>
        <td>Player Name</td> 
        <td>Partial Score</td> 
        <td>Total Score</td> 
    </tr>        
    <tr ng-repeat="player in team.players">
        <td>{{player.name}}</td> 
        <td>{{player.PScore}}</td> 
        <td>{{player.TScore}}</td> 
    </tr>
</table>

您应该向您的作用域添加一个为您执行逻辑的方法。

像这样的东西应该起作用：

$scope.getAllPlayers = function() {
    var players = [];
    this.teams.forEach(function(team){
        players = players.concat(team.players);
    });
    return players;
}

然后在你的领域：

<table>
  <thead>
    <tr>
        <th ng-repeat="player in getAllPlayers()">{{ player.name }}</th>
        <th>Partial Score</th>
        <th>Total Score</th>
    </tr>
  </thead>
</table>

我没有使用Angular，所以我可能错了，但我很确定这是正确的做法。这种逻辑必须在控制器中，就像嵌套循环一样简单。

编辑：参考注释，您可以制作一个函数，以您想要的方式返回标题单元格

$scope.getHeaderCells = function() {
    var cells = [];
    this.teams.forEach(function(team){
        cells = cells.concat(team.players.map(function(player){
            return { team: team, value: player.name };
        })).concat([
            {team: team, value: 'Partial Score'},
            {team: team, value: 'Total Score'}
        ]);
    });
    console.log(cells);
    return cells;
}

带有

<th ng-repeat="cell in getHeaderCells()">{{ cell.value }}</th>

这是一个小提琴

我使用ng-reeat-start和ng-reeat-end指令找到了它。我真的不想为自己编写生成HTML的函数，因为这就是我最初改用Angular的原因。

这是一张截图：https://i.stack.imgur.com/UsPnb.png.

这是仅针对标头的（精简到相关部分）代码，其他内容都类似。我唯一不喜欢的"技巧"部分是B和t的ng-show属性，以正确地反转它，但它现在对我有效。我想我可以通过指令来清理它。

<table class="table table-condensed table-striped table-hover table-responsive">
        <thead>
            <tr>
                <th ng-repeat-start="team in game.getTeams()" ng-hide="true"></th>
                    <th ng-repeat="player in team.getPlayers()" ng-class="$parent.$first && 'text-info' || 'text-danger'">
                        <u>
                            {[ player.name | truncate ]}
                        </u>
                    </th>
                    <th ng-repeat-end ng-show="$first">
                        #
                    </th>
            </tr>
        </thead>
</table>
相关文章：