NG-重复中显示隐藏的分区NG-点击 [英] Show hidden div on ng-click within ng-repeat

问题描述

我工作的一个Angular.js应用程序，通过医疗程序一个JSON文件过滤器。我想显示当使用NG-点击点击程序的名称（在同一页面上）每个过程的细节。这是我到目前为止，与.procedure的细节DIV设置为显示：无：

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>

我是pretty在新的角度。有什么建议？

I'm pretty new at angular. Any suggestions?

推荐答案

删除显示：无，并使用 NG-节目而不是：

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

您也可以使用纳克级来切换类：

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

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

我喜欢这个更多，因为它可以让你做一些很好的转换： http://jsfiddle.net/asmKj/1/

这篇关于NG-重复中显示隐藏的分区NG-点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！