[解決済み] ng-clickでng-repeat内にhidden divを表示させる

質問

私は、医療処置のjsonファイルを通してフィルタリングするAngular.jsのアプリに取り組んでいます。私は、プロシージャの名前がクリックされたときに各プロシージャの詳細を表示したいと思います（同じページで）ng-clickを使用しています。これは今のところ私が持っているもので、.procedure-details divはdisplay:noneに設定されています。

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

私はangularのかなり新しいです。何か提案はありますか？

どのように解決するのですか？

を削除します。 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/