-1

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?

Pds Ink
  • 765
  • 2
  • 12
  • 38

3 Answers3

1

You don't need to use ngShow + ngHide: one is enough.

 <div class="Printpanel ng-hide" ng-show="showDetails == $index">
Mistalis
  • 17,793
  • 13
  • 73
  • 97
  • ok, thank you, i was only trying to figure out. But my problem still remain, all other Printpanel divs are still visible – Pds Ink May 04 '17 at 09:09
0

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>
Sachin Gupta
  • 7,805
  • 4
  • 30
  • 45
  • didn't know... i upvote, anyway thank you for advice, but the problem still remain, i want to remove all others div showed – Pds Ink May 04 '17 at 09:16
  • This is a problem of angular scope inheritance, use as controller as notation. and use their view modal object to access `showDetails` variable. – Sachin Gupta May 04 '17 at 09:39
  • If you don;t want to use as notation, then as an alternate; you can use $parent to access `showDetails` variable of parent scope. – Sachin Gupta May 04 '17 at 09:44
  • 1
    @PdsInk "*It is always better to use ng-if*" is wrong. In this case, ngShow is clearly better as it won't force to delete/add elements to the DOM when clicking a link. I guess that is why your answer has been downvoted, Sachin. – Mistalis May 04 '17 at 10:06
0

seems you have missed closing double quotes here ng-click="showDetails = $index;

Also either of one you need to use ng-show/ng-hide/ng-if = expression

SAN
  • 326
  • 6
  • 23