I'm currently utilizing ng-repeat to exhibit a multidimensional array...
<div class="form-container" ng-repeat="formblock in forms">
<div ng-click="showResults($index)" ng-if="repeat == true" class="drop" type="button">{{ formblock[0].form_name }}</div>
<div ng-hide="results[$index]" class="form-block" ng-repeat="form in formblock">
<div class="optionWrap">
<div class="formURL">{{ form.url }}</div>
<div class="formCount">{{ form.count }}</div>
<div class="formSubmit">{{ form.submit }}</div>
</div>
</div>
</div>
The stated code presents numerous lists, with the title of each list denoted as {formblock[0].form_name}. Upon clicking this title, the aim is to toggle the visibility of each corresponding formblock, while ensuring the title remains visible.
Currently, the functionality does not operate as desired. Upon click, only elements from within formblock are hidden, specifically form. Additionally, this hiding action applies universally across all lists, whereas I intend for the ng-click function to exclusively toggle elements within the same container.
How can I accomplish this?
Here lies my controller function for ng-click:
$scope.showResults = function (idx) {
$scope.results[idx] = !$scope.results[idx];
}