Я пытаюсь выяснить способ развернуть и свернуть с помощью angular js. Я не смог найти элегантный способ сделать это, не манипулируя объектами 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>
Проблема с этой настройкой заключается в том, что если у меня есть родительские divs, и у них есть что-то под ними, чтобы развернуть, щелчок по раскрывающемуся тексту расширит их в обеих областях, поскольку они не уникальны.