我正在尝试使用AngularJS实现扩展和折叠的功能。但是,我没有找到一种优雅的方法来做到这一点,而不需要在控制器中操作DOM对象(这不是Angular的方式)。
目前,我有一种很好的方法可以用于单层的扩展和折叠。但是当我开始嵌套时,情况变得复杂,并且不能按照我想要的方式工作(在不应该扩展和折叠的多个区域之间进行扩展和折叠)。
问题出现在于我不知道如何使用ng-click发送唯一标识符,以仅扩展/折叠正确的内容。需要提及的是,这些项位于ng-repeat中,因此我不能自定义要发送的参数。
我能够使用这个jsfiddle帮助我使单层的扩展和折叠正常工作。然而,这是一种切换的方式来做到这一点,我希望用户能够同时保持其他已扩展的内容,而不仅仅是一个。因此,我所做的是使用一个数组,并且每次单击某个项时,将该单击项的索引添加到数组中并添加class:expanded。当用户再次单击时,该索引将从数组中删除,并且该区域将折叠。
我发现另一种方法是使用指令来实现。但是,我真的找不到任何示例来理解指令如何工作。当涉及编写指令时,我甚至不确定如何开始。
我的当前设置如下:
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都处于展开状态,并且它们下面都有要展开的内容,那么点击展开文本将会同时展开它们,因为它们不是独立的。