ng-repeat内でng-clickで非表示divを表示

Question

私は医療手技のjsonファイルをフィルタリングするAngular.jsアプリを開発しています。 ng-clickを使用してプロシージャ名をクリックすると（同じページ上で）、各プロシージャの詳細を表示したいと思います。なし：：

<ul class="procedures"> 
    <li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp"> 
     <h4><a href="#" ng-click="?">{{procedure.definition}}</a></h4> 
     <div class="procedure-details"> 
      <p>Number of patient discharges: {{procedure.discharges}}</p> 
      <p>Average amount covered by Medicare: {{procedure.covered}}</p> 
      <p>Average total payments: {{procedure.payments}}</p> 
     </div> 
    </li> 
</ul> 

私は角でかなり新たなんだこれは.procedure-詳細が表示に設定DIVと私は、これまで持っているものです。助言がありますか？

Answer 1

display:noneを削除し、代わりにng-showを使用します。

<ul class="procedures"> 
    <li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp"> 
     <h4><a href="#" ng-click="showDetails = ! showDetails">{{procedure.definition}}</a></h4> 
     <div class="procedure-details" ng-show="showDetails"> 
      <p>Number of patient discharges: {{procedure.discharges}}</p> 
      <p>Average amount covered by Medicare: {{procedure.covered}}</p> 
      <p>Average total payments: {{procedure.payments}}</p> 
     </div> 
    </li> 
</ul> 

ここでフィドルです：http://jsfiddle.net/asmKj/

---

ます。また、クラスを切り替えるng-classを使用することができます。

<div class="procedure-details" ng-class="{ 'hidden': ! showDetails }"> 

私はこれ以上のように、それはhttp://jsfiddle.net/asmKj/1/

Answer 2

使用ng-showをしてng-clickハンドラでshowスコープ変数の値を切り替える：WSあなたはいくつかの素晴らしい遷移を行います。あなたが本当に要素のhref = "＃" を必要としない、またhttp://jsfiddle.net/pvtpenguin/wD7gR/1/

<ul class="procedures"> 
    <li ng-repeat="procedure in procedures"> 
     <h4><a href="#" ng-click="show = !show">{{procedure.definition}}</a></h4> 
     <div class="procedure-details" ng-show="show"> 
      <p>Number of patient discharges: {{procedure.discharges}}</p> 
      <p>Average amount covered by Medicare: {{procedure.covered}}</p> 
      <p>Average total payments: {{procedure.payments}}</p> 
     </div> 
    </li> 
</ul>