在 ng-click 中显示隐藏的 div

我在开发一个 Angular.js 应用程序它可以过滤 json 医疗程序文件。当使用 ng-click 单击过程的名称时(在同一页面上) ，我想显示每个过程的详细信息。这就是我目前所知道的。过程-详细信息 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>

我在角度方面还是个新手，有什么建议吗？

164220 次浏览
小开
最佳答案

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/

小开

Use ng-show and toggle the value of a show scope variable in the ng-click handler.

Here is a working example: 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>

提交答案