我正在尝试找出一种使用 AngularJS 进行展开和折叠的方法。我无法找到一种优雅的方法来做到这一点,而不需要在 Controller 中操作 DOM 对象(这不是 Angular 的方式)。
目前我有一个很好的方法来实现一层的展开和折叠。然而,当我开始嵌套时,事情变得复杂,并且无法按照我想要的方式工作(在不应该的情况下扩展和折叠多个区域)。
问题出在我不知道如何通过 ng-click 发送唯一标识符以仅展开/折叠正确的内容。我应该提到这些项目位于 ng-repeat 中,因此我必须自定义发送的参数。
我能够使用这个jsfiddle帮助我让一层展开和折叠工作。然而,这是一种切换方式,我希望用户能够在扩展其他内容的同时保持内容扩展。因此,我解决此问题的方法是使用一个数组,每次单击某项时,该单击项的索引都会添加到数组中,并且类会扩展。当用户再次单击时,索引将从数组中删除,并且该区域被折叠。
我发现您可以做到这一点的另一种方法是使用指令。但我确实找不到任何示例来让我了解指令的工作原理。我什至不知道如何开始编写指令。
我当前的设置是这样的:
function Dexspander($scope) {
$scope.ExpandArray = [];
//Push or pop necessary elements for tracking
$scope.DespopulatArray = function (identifier, element) {
if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
$scope.ExpandArray.splice(_.indexOf($scope.ExpandArray, identifier + element), 1);
} else {
$scope.ExpandArray.push(identifier + element);
}
}
//Change class of necessary elements
$scope.Dexspand = function (identifier, element) {
if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
return "expand";
} else {
return "collapse";
}
}
}
<div class="user-header" ng-repeat="user in users">
<h1 ng-click="DespopulatArray('user', $index)">Expand</h1>
</div>
<div class="user-content" ng:class="Dexspand('user', $index)">
<div class="content">
<div class="user-information">
<div class="info-header">
<h1 ng-click="DespopulatArray('info', $index)>Some Information</h1>
</div>
<div class="info-contents" ng:class="Dexspand('info', $index)">
stuff stuff stuff stuff...
</div>
</div>
</div>
</div>
此设置的问题是,如果我必须将展开的 div 作为父级,并且它们下面都有要展开的内容,则单击展开文本将在两个区域中展开它们,因为它们不是唯一的。
最佳答案
你可以在html中完全解决这个问题:
<div>
<input ng-model=collapse type=checkbox>Title
<div ng-show=collapse>
Only shown when checkbox is clicked
</div>
</div>
这也适用于 ng-repeat,因为它会为每个成员创建一个本地范围。
<table>
<tbody ng-repeat='m in members'>
<tr>
<td><input type=checkbox ng-model=collapse></td>
<td>{{m.title}}</td>
</tr>
<tr ng-show=collapse>
<td> </td>
<td>{{ m.content }}</td>
</tr>
</tbody>
</table>
请注意,即使重复有自己的作用域,最初它也会从 super 作用域继承折叠的值。这允许您在一个地方设置初始值,但这可能会令人惊讶。
您当然可以重新设置复选框的样式。请参阅http://jsfiddle.net/azD5m/5/
更新了 fiddle : http://jsfiddle.net/azD5m/374/原始 fiddle 使用关闭</input>
标签来添加 HTML 文本标签,而不是使用 <label>
标签。
关于javascript - 使用 AngularJS 展开和折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12603425/