我正在尝试使用 ng-repeat 重复创建记录，并且记录的数据部分需要可折叠。我尝试了可折叠并且工作正常(我在页面顶部添加了脚本(，但可折叠部分不适用于重复记录。
有人可以告诉我我错过了什么吗？
<!DOCTYPE>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
</head>
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: 'Edit';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "Done Editting";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.Customers = [
];
$scope.Add = function () {
var customer = {};
customer.Type = $scope.AccType;
customer.Name = $scope.Name;
customer.Country = $scope.Country;
$scope.Customers.push(customer);
$scope.Type = "";
$scope.Name = "";
$scope.Country = "";
};
$scope.Remove = function (index) {
var name = $scope.Customers[index].Name;
if ($window.confirm("Do you want to delete " + name)) {
$scope.Customers.splice(index, 1);
}
}
});
</script>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
<button type="button" class="collapsible">This is working</button>
<div class="content">
<p>Enter your account information:</p>
<tr>
<label for="ftype">Acc. Type:</label>
<td><input type="text" value=""></td>
<td><label for="ftype">Name:</label>
<input type="text" value=""></td>
<td><label for="ftype">Country:</label>
<input type="text" value=""></td>
<td><input type="button" value="Delete"></td><br><br>
</tr>
</div>
<br>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="10">
<tbody ng-repeat="m in Customers">
<tr>
<td>
<button class="collapsible">{{m.Name}}</button>
<div class="content">
<p>Notes</p>
</div>
</td>
<td><input type="text" value="{{m.AccType}}" /></td>
<td><input type="text" value="{{m.Name}}" /></td>
<td><input type="text" value="{{m.Country}}" /></td>
<td><input type="button" ng-click="Remove($index)" value="Delete" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<form>
<label for="type">Account Type:</label><br>
<input type="text" ng-model="Type" id="type" name="type" value=""><br>
<label for="name">Name:</label><br>
<input type="text" ng-model="Name" id="name" name="name" value=""><br>
<label for="country">Country:</label><br>
<input type="text" ng-model="Country" id="country" name="country" value="">
<input type="button" ng-click="Add()" value="Add" />
</form>
</td>
</tr>
</tfoot>
</table>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
您可以通过非常简单的步骤执行此操作：
添加- 要添加点击事件的
ng-click="isopen = !isopen"。 - 将
ng-if ="isopen"添加到要折叠的行中。
假设您有如下所示的行，单击第一个tr标签时，您必须打开第二行tr行。 所以就按下面这样做。
<table>
<tr ng-click="isopen = !isopen"></tr>
<tr ng-if ="isopen"></tr>
</table>