Question

我想创建一个表，在其标题中包含每个玩家的名字，每个玩家包含两个团队。范围有一个变量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放在桌子外面。

我也尝试过指令 - 但这些都没有帮助。这是我的指令文件的一个例子。

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

例如，如果我的<player-initials>指令带有replace: 'false'，则浏览器会将非<th>元素排除在表格之外。设置replace: 'true'，修复了这个问题，然后我收到错误，因为指令中有多个根元素。我无法用任何东西包装指令中的元素，因为这会导致HTML无效（如上所述）。

我已经尝试了元素和属性指令的所有组合并替换，没有什么能给我我想要的东西。有什么帮助吗？

Answer 1

您应该为您的范围添加一个为您执行逻辑的方法。

这样的事情应该有效：

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

然后在你的dom中：

<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>

这里是a fiddle

Answer 2

创建了一个小提琴here。

希望这是您正在寻找的，如果不是让我知道您正在寻找的格式。您的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>

Answer 3

我使用ng-repeat-start和ng-repeat-end指令计算出来。我真的不想写函数来为我生成HTML，因为这就是我首先切换到Angular的原因。

以下是截图：http://i.imgur.com/e5LBvQB.png。

这是针对标题的（精简到相关部分）代码，其他一切都相似。我不喜欢的唯一“hacky”部分是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>

使用AngularJS在同一个表行中重复一组s

3 个答案: