10

当客户端单击行时，我想在表格中插入额外的行。不应预取数据，因为我预计最多有 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 以一种骇人听闻的方式在表格下方显示了详细信息，但这不是我想要的。

您如何使用 angular.js 完成此任务？这样做的角度是什么？

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

4

3 回答 3

7

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

如果您还想摆脱额外的<tr ng-show="..."></tr>.

编辑：

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

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

于 2013-04-02T12:20:45.350 回答
1

一个样品

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

})

演示：小提琴

于 2013-03-21T12:04:58.150 回答
0

出色地。事实上，您设计的主要问题是您希望在同一个表中显示数千行。它会起作用，但在某些浏览器（IE）中可能很难呈现。对于每一行，您将有一些绑定，并且每个绑定都会添加观察者。您应该始终尽量减少页面中的装订量。我建议您在阵列中使用分页系统。使用 ng-repeat 对列表进行分页

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

于 2013-03-21T11:51:35.953 回答