在ng-repeat内显示隐藏的div

我正在开发一个Angular.js应用程序，通过医疗程序的json文件进行过滤。 我想通过使用ng-click来点击过程的名字（在同一页上）来显示每个过程的细节。 这是我到目前为止，与.procedure细节div设置为显示：无：

<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度。 有什么build议么？

Answer 1

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

Answer 2

使用ng-show并在ng-click处理程序中切换show scopevariables的值。

这是一个工作的例子： 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>