在使用 ng-repeat 以角度呈现的表中推送行

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

我已经设法用 ng-show 以一种 hacky 的方式在表格下方显示详细信息，但这不是我想要的。

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

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

Answer 1

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

如果您还想摆脱额外的<tr ng-show="..."></tr>，还有一个替代方法是在小提琴中评论“没有玩家”消息。

编辑：

正如 cmets 中所指出的，在 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，如果可以避免，这在 Angular 中不是一个好习惯。就我而言，我会将数据放在页面上的其他位置，在静态区域中。当我做这样的事情时，我在我的页面中添加了一个 twitter 引导模式，当用户单击“更多信息”时，模式会打开并显示所选对象的信息。