在Angular中，我试图创建一个具有可折叠明细行的表。我有一个样例，其中包含用于主控细节的一排行面板，如果是主控细节，则包含可折叠的表格。我试图修改代码以将表用于主数据，并将表用于详细数据。但是，我无法使其正常打开或折叠。
我有一个非常简单的插件文件来演示我所拥有的： 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>
答案 0 :(得分：1)
您的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