【发布时间】：2019-05-09 20:30:36
【问题描述】：
在 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 angularjs twitter-bootstrap-3