Angularjs 按角度推送使用ng repeat渲染的表中的行

我想在客户端单击一行时，在表中内联插入一个额外的行。不应该预取数据，因为我预计最多有30行，但每行都有关联的数据，在一个get中获取这些数据是不合理的

到目前为止，我的方法是使用ng repeat迭代我的集合并呈现一个表。当客户端按下该行时，客户端希望有关该行的详细信息以内联方式显示在按下的行下的额外行中

<tr ng-repeat="court in courts">            
  <td>{{court.name}}</td>
  <td>{{court.number}}</td>
  <td>{{court.nrOfPlayers}}</td>
  <td>
    <a href ng:click="toggle(court.number)">Details</a>  <!-- click toggles extra row with data loaded async -->
  </td>
</tr>
<!-- extra row here -->

{{court.name}
{{court.number}
{{court.nrOfPlayers}

我已经设法用一种骇人的方式用ng秀展示了桌子下面的细节，但这不是我想要的

如何使用angular.js实现这一点？这样做的角度是什么

---

下面是一个愚蠢的壁球场的例子。事实上，设计的主要问题是希望在同一个表中显示数千行。它可以工作，但在某些浏览器（IE）中可能很难渲染。对于每一行，您将有几个绑定，每个绑定都会添加观察者。您应该始终尽量减少页面中的绑定量。我建议您在阵列中使用分页系统

如果您真的想在不预渲染行的情况下执行所需操作，则必须编辑dom，这在可以避免的情况下不是一个好的实践。在我的例子中，我将把数据放在页面的其他地方，在一个静态区域中。当我这样做的时候，我在我的页面中添加了一个twitter引导模式，当用户点击“更多信息”时，该模式被打开，其中包含所选对象的信息。

一个示例

var app = angular.module('test-app', []);

app.controller('MyController', function($scope, $rootScope, $timeout){

    $scope.copy = {
        p1: ['c1 p1', 'c1 p2'],
        p3: ['c3 p1', 'c3 p2', 'c3 p3', 'c3 p4', 'c3 p5']
    }

    $scope.courts = [
        {
            "number": 1,
            "name": "the best court",
            "nrOfPlayers": 2
        }, {
            "number": 2,
            "name": "the bad court",
            "nrOfPlayers": 0
        }, {
            "number": 3,
            "name": "the other court",
            "nrOfPlayers": 5
        }
    ];

    $scope.loadPlayers = function(court){
        //Implement your logic here
        //Probably using ajax
        $timeout(function(){
            $scope.players = $scope.copy['p' + court.number] || [];
        }, Math.random() * 2000);
    }

    $scope.shouDetails = function(court){
        if(court.nrOfPlayers) {
            delete $scope.players;
            $scope.loadPlayers(court);
        } else {
            $scope.players = [];
        }
    }

})

---

演示：

我认为可能的解决方案是

如果您还想摆脱额外的

，还可以选择在小提琴上注释“无玩家”消息

编辑：

正如评论中所指出的，在AngularJS 1.2+中，您现在可以使用

ng repeat start

和

ng repeat end

来解决此问题

---

Jossef Harush提出了一个问题：

是的，关于设计缺陷，你当然是对的。我只是不清楚。见我编辑的问题。不幸的是，使用模态不是我们认为对我们问题的一个干净的解决方案，但是谢谢你的输入。不幸的是（我的错）我不清楚问题到底是什么。看我编辑的问题！在您的解决方案中，存在

tbody

元素的重复。在angular 1.2+中，您可以使用

ng repeat start

和

ng repeat end

来避免这种情况。iv'e更新了你的小提琴：@JossefHarush你的解决方案目前是正确的。提供此答案时，

ng repeat start

和

ng repeat end

不可用。请注意：正文副本是有效的HTML.）