100

私は、医療処置の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でかなり新しいです。助言がありますか？

4

2 に答える 2

158

を削除し、代わりに次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/

于 2013-05-21T01:42:19.353 に答える
28

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

これが実際の例です：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>
于 2013-05-21T01:44:34.503 に答える