Show hidden div on ng-click within ng-repeat

Question

I m working on an Angular js app that filters through a json file of medical procedures  I d like to show the details of each procedure when the name of the procedure is clicked  on the same page  using ng-click  This is what I have so far  with the  procedure-details div set to display none    lt ul class  procedures  gt       lt li ng-repeat  procedure in procedures   filter query   orderBy orderProp  gt           lt h4 gt  lt a href     ng-click     gt   procedure definition   lt  a gt  lt  h4 gt            lt div class  procedure-details  gt               lt p gt Number of patient discharges    procedure discharges   lt  p gt               lt p gt Average amount covered by Medicare    procedure covered   lt  p gt               lt p gt Average total payments    procedure payments   lt  p gt            lt  div gt       lt  li gt   lt  ul gt    I m pretty new at angular  Any suggestions

User · Answer

Use ng-show and toggle the value of a show scope variable in the ng-click handler   Here is a working example  http   jsfiddle net pvtpenguin wD7gR 1    lt ul class  procedures  gt       lt li ng-repeat  procedure in procedures  gt           lt h4 gt  lt a href     ng-click  show    show  gt   procedure definition   lt  a gt  lt  h4 gt            lt div class  procedure-details  ng-show  show  gt               lt p gt Number of patient discharges    procedure discharges   lt  p gt               lt p gt Average amount covered by Medicare    procedure covered   lt  p gt               lt p gt Average total payments    procedure payments   lt  p gt            lt  div gt       lt  li gt   lt  ul gt

User · Answer

Remove the display none  and use ng-show instead    lt ul class  procedures  gt       lt li ng-repeat  procedure in procedures   filter query   orderBy orderProp  gt           lt h4 gt  lt a href     ng-click  showDetails     showDetails  gt   procedure definition   lt  a gt  lt  h4 gt            lt div class  procedure-details  ng-show  showDetails  gt               lt p gt Number of patient discharges    procedure discharges   lt  p gt               lt p gt Average amount covered by Medicare    procedure covered   lt  p gt               lt p gt Average total payments    procedure payments   lt  p gt            lt  div gt       lt  li gt   lt  ul gt    Here s the fiddle  http   jsfiddle net asmKj     You can also use ng-class to toggle a class    lt div class  procedure-details  ng-class     hidden     showDetails    gt    I like this more  since it allows you to do some nice transitions  http   jsfiddle net asmKj 1

[angularjs] Show hidden div on ng-click within ng-repeat

Examples related to angularjs

Examples related to angularjs-ng-repeat