在 Angular 中，我试图创建一个包含可折叠详细信息行的表格。我有一个这样的样本，它使用一堆行面板作为主细节，如果是主细节，它包含可折叠的表格。我正在尝试修改代码以对主数据使用表格，对详细数据也使用表格。但是，我无法正确打开或折叠它。
我有一个非常简单的 plunker 文件来演示我有什么: http://plnkr.co/9ma3FnuzCrYJp72dqQXx?p=info
我认为这是 HTML 的问题，我正在尝试在不同的地方使用 ng-repeat 进行测试，例如在 div 或 tr，但我对 angular 不太熟悉。谁能指出我做错了什么？我正在尝试以下操作:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title></title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/customizedbs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-ng-controller="homeController">
<div class="container">
<table class="table table-striped">
<tr class="row">
<th>ID</th>
<th>Name</th>
</tr>
<tbody ng-repeat="product in products">
<tr>
<td>
<span class="handpointer glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)" data-target="#view_{{product.productid}}" data-toggle="collapse" aria-expanded="false" data-ng-if="product.items!=null"></span>
</td>
<td> {{product.productid}}</td>
<td> {{product.productname}}</td>
</tr>
<div class="collapse" id="view_{{product.productid}}" data-ng-if="product.items!=null">
<div class="col-sm-offset-1">
<table class="table-condensed responsive-table">
<tr class="row">
<th>#ID</th>
<th>Item</th>
<th>Amount</th>
<th>Qty</th>
</tr>
<tr class="row" ng-repeat="item in product.items">
<td data-ng-bind="item.prodDetailId"></td>
<td data-ng-bind="item.prodDetailDesc"></td>
<td data-ng-bind="item.amount | currency"></td>
<td data-ng-bind="item.qty"></td>
</tr>
</table>
</div>
</div>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://code.angularjs.org/1.3.11/angular-route.min.js"></script>
<script>
angular.module('app', [])
.controller('homeController', ['$scope', function($scope) {
$scope.collapse = function(event) {
$(event.target).toggleClass("glyphicon-chevron-down");
};
$scope.products = [{
"productid": 1001456,
"productname": "Spring Season Gift",
"amount": 250,
"orderDate": "2015-02-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17890,
"prodDetailDesc": "PS4",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17891,
"prodDetailDesc": "Heart Shaped Ring",
"amount": "100",
"qty": 1
}, ]
}, {
"productid": 1001457,
"productname": "Christmas Season Gift",
"amount": 349,
"orderDate": "2015-04-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17900,
"prodDetailDesc": "Chocolate Giftbox",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17901,
"prodDetailDesc": "Xbox 360",
"amount": "199",
"qty": 1
}, ]
}, {
"productid": 1001458,
"productname": "Birthday Gift",
"availablity": "N/A",
"amount": 200
}];
}]);
</script>
</body>
</html>最佳答案
您的 HTML 结构有误。 您不能将 div 直接放在表格中..
您需要添加一个 tr，然后添加一个 td，然后在其中添加 div。
我已经更正了您的 HTML 结构，请检查。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title></title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/customizedbs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-ng-controller="homeController">
<div class="container">
<table class="table table-striped">
<tr class="row">
<th>ID</th>
<th>Name</th>
</tr>
<tbody ng-repeat="product in products">
<tr>
<td>
<a class="handpointer glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)" data-ng-if="product.items!=null" role="button" data-toggle="collapse" href="#view_{{product.productid}}" aria-expanded="false">
</a>
</td>
<td> {{product.productid}}</td>
<td> {{product.productname}}</td>
</tr>
<tr class="collapse" id="view_{{product.productid}}" data-ng-if="product.items!=null">
<td colspan="3">
<div class="col-sm-offset-1">
<table class="table-condensed responsive-table">
<tr class="row">
<th>#ID</th>
<th>Item</th>
<th>Amount</th>
<th>Qty</th>
</tr>
<tr class="row" ng-repeat="item in product.items">
<td data-ng-bind="item.prodDetailId"></td>
<td data-ng-bind="item.prodDetailDesc"></td>
<td data-ng-bind="item.amount | currency"></td>
<td data-ng-bind="item.qty"></td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://code.angularjs.org/1.3.11/angular-route.min.js"></script>
<script>
angular.module('app', [])
.controller('homeController', ['$scope', function($scope) {
$scope.collapse = function(event) {
$(event.target).toggleClass("glyphicon-chevron-down");
};
$scope.products = [{
"productid": 1001456,
"productname": "Spring Season Gift",
"amount": 250,
"orderDate": "2015-02-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17890,
"prodDetailDesc": "PS4",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17891,
"prodDetailDesc": "Heart Shaped Ring",
"amount": "100",
"qty": 1
}, ]
}, {
"productid": 1001457,
"productname": "Christmas Season Gift",
"amount": 349,
"orderDate": "2015-04-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17900,
"prodDetailDesc": "Chocolate Giftbox",
"amount": "150",
"qty": 1
}, {
"prodDetailId": 17901,
"prodDetailDesc": "Xbox 360",
"amount": "199",
"qty": 1
}, ]
}, {
"productid": 1001458,
"productname": "Birthday Gift",
"availablity": "N/A",
"amount": 200
}];
}]);
</script>
</body>
</html>更新 plunker
关于html - Angular 中的主/细节网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53680280/