在与角纳克重复呈现的表的行推(Push rows in a table rendered with

我想在一个额外的行内联推在一个表中，当客户端点击该行。这些数据不应该被预取，因为我期待有至多30行，但其中每一行都有其相应的会是不合理的一个GET来获取数据。

我的做法到目前为止是使用NG-重复迭代我的收集和呈现的表。当客户端按行，客户希望被直接显示出来的压制下排的额外的行有关该行的详细信息。

<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-显示在哈克的方式表格下方的详细信息，但是这不是我想要的。

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

})

演示：小提琴