angularjsangularjs-ng-repeatng-showng-hide

ng-click - hide all other div that isn't this $index within ng-repeat

What i'm trying to do is similiar to an accordion.

Simple put i have an ng-repeat with an <a> tag that once clicked show another div called "Printpanel" nested inside it within ng-show.

If the user cick to another <a> tag, i want to hide all other div showed before, and open only to that one related.

I am using $index to trigger the specific div.

Here what i have done:

 <div ng-repeat="product in $ctrl.Products">
    <a href="#" ng-click="showDetails = $index;>CONFIGURE</a>


 <div class="Printpanel ng-hide" ng-show="showDetails == $index" ng-hide="showDetails != $index">
 </div>

it seems that ng-hide is not recognized... Anybody have an idea?

Solution

  • You can use ng-if also:

    <div class="Printpanel" ng-if="showDetails == $index">

    EDIT:

    due to scope inheritance problem, you are not able to set showDetails variable. use $parent for that.

    working example:

    <div ng-repeat="product in $ctrl.Products">
    <a href="#" ng-click="$parent.showDetails = $index">CONFIGURE</a>
    <div class="Printpanel" ng-if="$parent.showDetails == $index"> </div>
</div>