在 ng-repeat 中通过 ng-click 显示隐藏的 div [英] Show hidden div on ng-click within ng-repeat

问题描述

我正在开发一个 Angular.js 应用程序，它通过医疗程序的 json 文件进行过滤.当使用 ng-click 单击程序名称(在同一页面上)时，我想显示每个程序的详细信息.这就是我到目前为止所拥有的，将 .procedure-details div 设置为 display:none:

<li ng-repeat="procedure in processes | filter:query | orderBy:orderProp"><h4><a href="#" ng-click="?">{{procedure.definition}}</a></h4><div class="procedure-details"><p>患者出院次数:{{procedure.discharges}}</p><p>Medicare 承保的平均金额:{{procedure.covered}}</p><p>平均总付款:{{procedure.payments}}</p>

我对角度很陌生.有什么建议吗?

解决方案

去掉display:none，改用ng-show:

<li ng-repeat="procedure in processes | filter:query | orderBy:orderProp"><h4><a href="#" ng-click="showDetails = !showDetails">{{procedure.definition}}</a></h4><div class="procedure-details" ng-show="showDetails"><p>患者出院次数:{{procedure.discharges}}</p><p>Medicare 承保的平均金额:{{procedure.covered}}</p><p>平均总付款:{{procedure.payments}}</p>

这是小提琴:http://jsfiddle.net/asmKj/

<小时>

你也可以使用 ng-class 来切换一个类:

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

我更喜欢这个，因为它允许你做一些很好的转换:http://jsfiddle.net/asmKj/1/

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:

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

I'm pretty new at angular. Any suggestions?

解决方案

Remove the display:none, and use ng-show instead:

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

Here's the fiddle: http://jsfiddle.net/asmKj/

---

You can also use ng-class to toggle a class:

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

I like this more, since it allows you to do some nice transitions: http://jsfiddle.net/asmKj/1/

这篇关于在 ng-repeat 中通过 ng-click 显示隐藏的 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！