Bolboa Bolboa - 11 months ago 44
AngularJS Question

how to use $index to toggle click event of elements within the same element

I am using

to display 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>

So what the code above does is display many lists, and the title of each list is
. When this title is clicked, I want to toggle the display of each
, but I want to keep the title visible.

The code above does not work right, when clicked, only a component of
is hidden, that is
is hidden. Moreover, it hides it for all lists, where I want the
to only toggle the elements within the same container as the function.

How can I achieve this?

this is my controller function for

$scope.showResults = function (idx) {
$scope.results[idx] = !$scope.results[idx];

Answer Source

You can pass the item of the ng-repeat to a function. Eg:

<div ng-repeat"item in list">
    <a href ng-click="doSomethingWith( item )">...</a>

$scope.doSomethingWith = function ( item ) {
    console.log('Fabulous! I received:', item);

In your specific case:

<div class="form-container" ng-repeat="formblock in forms">
    <div ng-click="showResults( formblock )" ng-if="repeat == true" class="drop" type="button">{{ formblock[0].form_name }}</div>
    <div ng-hide="! formblock.showResults " class="form-block" ng-repeat="form in formblock">

$scope.showResults = function ( formBlock ) {
    formBlock.showResults = true;