web-dev-qa-db-ja.com

ng-repeat内のng-クリックで非表示の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>

私はアンギュラーがかなり新しいです。助言がありますか？

angularjsangularjs-ng-repeat
99
Sara

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/

156
Joseph Silber

ng-showを使用し、ng-clickハンドラーでshowスコープ変数の値を切り替えます。

これが実際の例です： 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>
28
Matt York