使用动态数据展开/折叠行信息

Question

我正在开发angularjs应用程序。我想展开/折叠表行，并在单击表行中的图像时显示更多动态信息。

请找到演示：http://next.plnkr.co/edit/LjVTnKjaLdnYojqV?preview

当点击行上的勾号时，我想显示该行的更多细节。目前，在我上面的演示中，它正在扩展行或在单击图像时折叠，但问题是它没有在扩展的行(新显示的行(中显示动态数据信息。

示例：

<table ng-table="tableParams" class="table table-condensed table-bordered table-striped">
<tbody ng-repeat="row in $data">
<tr ng-click="show()">
<td>
<a class="btn btn-link" ng-init="toggle[$index] = false" ng-click="toggle[$index] = !toggle[$index]">
<span class="glyphicon glyphicon-ok" ng-if="!toggle[$index]"></span>
<span class="glyphicon glyphicon-bed" ng-if="toggle[$index]"></span>
</a>
</td>
<td data-title="'Name'">{{row.name}}</td>
<td data-title="'Age'">{{row.age}}</td>
<td data-title="'SID'">{{row.sid}}</td>
</tr> 
<tr ng-if="toggle[$index]">
<div ng-table="tableParams2" ng-repeat="row in $data">
<td> {{$index}}</td>
<td> {{product}}</td>
<td> {{month}} </td>
<td> {{pid}}</td>
</div>
</tr>
</tbody>
</table> 

js代码：

app.controller('MainCtrl', function($scope, NgTableParams) {
$scope.show = function(){
alert("show/hide");
var data = [{product: "TV", month: 5,pid:"11"},
{product: "mobile", age: 4,pid:"22"},
{product: "desktop", age: 7,pid:"33"}];
$scope.tableParams2 = new NgTableParams({}, { dataset: data});
}
var data = [{name: "Moroni", age: 50,sid:"12PAX"},
{name: "Tiancum", age: 43,sid:"12PAX"},
{name: "Jacob", age: 27,sid:"12PAX"},
{name: "Nephi", age: 29,sid:"12PAX"},
{name: "Enos", age: 34,sid:"12PAX"},
{name: "Tiancum", age: 43,sid:"12PAX"},
{name: "Jacob", age: 27,sid:"12PAX"},
{name: "Nephi", age: 29,sid:"12PAX"},
{name: "Enos", age: 34,sid:"12PAX"},
{name: "Tiancum", age: 43,sid:"12PAX"},
{name: "Jacob", age: 27,sid:"12PAX"},
{name: "Nephi", age: 29,sid:"12PAX"},
{name: "Enos", age: 34,sid:"12PAX"},
{name: "Tiancum", age: 43,sid:"12PAX"},
{name: "Jacob", age: 27,sid:"12PAX"},
{name: "Nephi", age: 29,sid:"12PAX"},
{name: "Enos", age: 34,sid:"12PAX"}];
$scope.tableParams = new NgTableParams({}, { dataset: data});  
});

Answer 1

我改为以下内容，不能确定，但似乎ng表在td元素周围的div有问题，并且可能在嵌套和再次引用$data时有问题？也许有人可以用更多的知识来评论。

.js

$scope.show = function(){
alert("show/hide");
$scope.tableParams2 = [{product: "TV", month: 5,pid:"11"},
{product: "mobile", age: 4,pid:"22"},
{product: "desktop", age: 7,pid:"33"}];
}

.html

<tr ng-if="toggle[$parent.$index]"ng-repeat="row in tableParams2">
<td> {{$index}}</td>
<td> {{row.product}}</td>
<td> {{row.month}} </td>
<td> {{row.pid}}</td>
</tr>

我更新的Plunker