Question

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

到目前为止，我的方法是使用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 -->

我已经设法用hacky的方式显示表格下方的细节，但这不是我想要的。

你如何使用angular.js实现这一目标？有什么角度方法呢？

这是一个愚蠢的壁球场示例http://jsfiddle.net/HByEv/

的小提琴

Answer 1

我认为可能的解决方案可能是http://jsfiddle.net/HByEv/2/。

如果您想要摆脱额外的<tr ng-show="..."></tr>，还可以选择在“小提琴”中评论的“无玩家”消息。

修改

正如评论中所指出的，在AngularJS 1.2+中，您现在可以使用ng-repeat-start和ng-repeat-end来解决此问题。

Jossef Harush提供了一个小提琴：http://jsfiddle.net/3yamebfw/

Answer 2

一个样本

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 = [];
        }
    }

})

演示：Fiddle

Answer 3

好。实际上，您的设计的主要问题是您希望在同一个表中显示数千行。它可以工作，但在某些浏览器（IE）中可能很难呈现。对于每一行，您将有一些绑定，每个绑定添加观察者。您应该始终尝试最小化页面中的绑定量。我建议你在你的阵列中使用分页系统。 Pagination on a list using ng-repeat

如果你真的想要做你想要的而不预先渲染行，你将不得不编辑dom，这在可以避免的角度时不是很好的练习。在我的情况下，我会将数据放在页面上的其他位置，在静态区域中。当我做这样的事情时，我在我的页面中添加了一个twitter bootstrap模式，当用户点击“更多信息”时，模态被打开并显示所选对象的信息。

推动以ng-repeat角度渲染的表格中的行

3 个答案: