我想在一个额外的行内联推在一个表中,当客户端点击该行。 这些数据不应该被预取,因为我期待有至多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/
我认为,一个可能的解决方案是http://jsfiddle.net/HByEv/2/ 。
也有在小提琴评论“无球员”消息的选择,如果你也想摆脱额外的<tr ng-show="..."></tr>
编辑:
正如在评论中指出,在AngularJS 1.2+现在可以使用ng-repeat-start
和ng-repeat-end
来解决这个问题。
Jossef Harush提供了一个小提琴: http://jsfiddle.net/3yamebfw/
一个样品
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 = [];
}
}
})
演示: 小提琴
好。 事实上,你的设计的主要问题是,你想展示数千行的在同一个表。 它的工作,但可能很难在某些浏览器(IE)来呈现。 对于每一行,你将有几个绑定,每一个绑定添加观察家。 你应该总是尽量减少在页面的结合量。 我建议你给你的阵列中使用分页系统。 分页使用NG-重复名单上
如果你真的想你想要做什么,而不预渲染的行,你将不得不修改DOM,这是不是在角一个很好的做法,当是可以避免的。 就我而言,我会放在其他地方的数据页上,在静态区域。 当我做了这样的事情,我在页面上添加了Twitter的引导模式,并在用户的“详细信息”点击模式与所选择的对象的信息打开。